/**
 * What: The storefront styling for BSS Commerce Pay — the plan cards, the provider cards, the fee
 *       and discount badges, and the express button.
 * Why:  The express button shipped as a bare <button> and was, in the merchant's words, nearly
 *       invisible. A payment control that a customer cannot see is worse than one that does not
 *       exist: the store looks broken rather than simple.
 * How:  Plain CSS, no build step, matching the rest of this plugin's assets. Everything is driven
 *       by custom properties on .bss-pay-fields / .bss-pay-express so a theme or a child stylesheet
 *       can retune it without overriding rules one at a time.
 *
 *       BUSINESS RULE: every token is READ with a fallback and DECLARED nowhere.
 *
 *       These defaults used to sit on `.bss-pay-fields` itself (and the express button's on the
 *       button itself), which reads as the same thing and is not: a property declared on an element
 *       beats anything an ancestor sets, so the Design panel on the checkout's Payment element
 *       could set `--bss-pay-radius` all it liked and the cards would go on using 10px. Nothing
 *       errored and nothing looked broken — the control simply did nothing, which is the hardest
 *       kind of bug for an author to report. Defaults belong in the `var()` fallback, where an
 *       ancestor can win and an untouched control still changes nothing.
 *
 *       BUSINESS RULE: colour defaults come from BREAKDANCE, not from us. `--bde-brand-primary-color`
 *       is what the site's own global settings set, so a store that has chosen its brand colour gets
 *       payment cards and an express button in it without configuring anything twice. The hex after
 *       it is only for a page rendered outside Breakdance. We used to hardcode #2563eb and #111827,
 *       which is why this looked like a plugin bolted onto the checkout rather than part of it.
 *
 *       BUSINESS RULE: the selected state is expressed with :checked, never with a JavaScript class.
 *       The checkout form is required to work with scripts disabled (Step 8), and a selected state
 *       that only a script can paint would leave a customer unable to see which option they had
 *       chosen on exactly the page where that matters most.
 */

.bss-pay-fields {
	border: 0;
	padding: 0;
	margin: 0;
}

/* The prompts above each group. */
.bss-pay-fields__heading {
	margin: 0 0 var(--bss-pay-gap, 10px);
	font-weight: 600;
}

.bss-pay-fields__heading:not(:first-child) {
	margin-top: 18px;
}

/* -------------------------------------------------------------------------------------------- */
/* Plans                                                                                         */
/* -------------------------------------------------------------------------------------------- */

.bss-pay-plans {
	display: flex;
	flex-direction: column;
	gap: var(--bss-pay-gap, 10px);
	margin: 0;
}

.bss-pay-plan {
	display: block;
	margin: 0;
}

.bss-pay-plan__control {
	/* Flex so the badge can be pushed to the far end by the text block growing into the gap. */
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	padding: var(--bss-pay-padding, 14px 16px);
	border: 1px solid var(--bss-pay-border, #d5d8dd);
	border-radius: var(--bss-pay-radius, 10px);
	background: var(--bss-pay-card-bg, transparent);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.bss-pay-plan__control:hover {
	border-color: var(--bss-pay-accent, var(--bde-brand-primary-color, #2563eb));
}

/*
 * The radio is visually hidden, not removed. The CARD is the control — it carries the selected
 * state in its border, its background and its title colour, and a browser-drawn circle beside all
 * three is both redundant and the one part of the design nobody can style consistently across
 * themes.
 *
 * Hidden the accessible way rather than with `display: none`, which would take it out of the
 * accessibility tree and out of keyboard navigation: the radio is still what a screen reader
 * announces, what arrow keys move between, and what the browser submits.
 */
.bss-pay-plan__control input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bss-pay-plan__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1 1 auto;
}

.bss-pay-plan__title {
	color: var(--bss-pay-title, inherit);
	font-size: var(--bss-pay-title-size, inherit);
	font-weight: var(--bss-pay-title-weight, 600);
	line-height: 1.35;
}

.bss-pay-plan__subtitle {
	color: var(--bss-pay-description, #6b7280);
	font-size: var(--bss-pay-description-size, 0.875em);
	line-height: 1.45;
}

/* Selected, painted from the input's own state so it needs no script. */
.bss-pay-plan__control:has(input[type="radio"]:checked) {
	border-color: var(--bss-pay-border-selected, var(--bde-brand-primary-color, #2563eb));
	background: var(--bss-pay-tint, color-mix(in srgb, var(--bss-pay-border-selected, var(--bde-brand-primary-color, #2563eb)) 8%, transparent));
	box-shadow: inset 0 0 0 1px var(--bss-pay-border-selected, var(--bde-brand-primary-color, #2563eb));
}

.bss-pay-plan__control:has(input[type="radio"]:checked) .bss-pay-plan__title {
	color: var(--bss-pay-accent, var(--bde-brand-primary-color, #2563eb));
}

/*
 * The honest fallback. Hiding the radio is only safe where the card can show the selection instead,
 * and that needs `:has()`. Where it is unsupported the radio comes back and lays the card out beside
 * it — plainer, and never a form with no visible selection at all.
 */
@supports not (selector(:has(*))) {
	.bss-pay-plan__control {
		display: flex;
		align-items: flex-start;
		gap: 12px;
	}

	.bss-pay-plan__control input[type="radio"] {
		position: static;
		width: auto;
		height: auto;
		margin: 3px 0 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		flex: 0 0 auto;
	}
}

.bss-pay-plan__control:focus-within {
	outline: 2px solid var(--bss-pay-accent, var(--bde-brand-primary-color, #2563eb));
	outline-offset: 2px;
}

/* One plan is a statement, printed like the sole-method line rather than as a dead card. */
.bss-pay-sole-plan {
	margin: 0;
}

/* -------------------------------------------------------------------------------------------- */
/* Providers                                                                                     */
/* -------------------------------------------------------------------------------------------- */

/*
 * Cards rather than the pills the method row used, because a provider carries more than a word.
 * "CCAvenue / Card, Net banking, EMI / +2%" is three pieces of information the customer is weighing
 * against another rail's three, and a pill can hold one of them.
 */
.bss-pay-providers {
	display: flex;
	flex-direction: column;
	gap: var(--bss-pay-gap, 10px);
	margin: 0;
}

.bss-pay-provider {
	margin: 0;
}

.bss-pay-provider[hidden] {
	display: none;
}

.bss-pay-provider__control {
	display: flex;
	position: relative;
	align-items: center;
	gap: 12px;
	padding: var(--bss-pay-padding, 14px 16px);
	border: 1px solid var(--bss-pay-border, #d5d8dd);
	border-radius: var(--bss-pay-radius, 10px);
	background: var(--bss-pay-card-bg, transparent);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.bss-pay-provider__control:hover {
	border-color: var(--bss-pay-accent, var(--bde-brand-primary-color, #2563eb));
}

/*
 * Hidden the same way, for the same reason, with the same fallback as the plan cards. The CARD is
 * the control; a browser-drawn circle beside a border, a tint and a coloured title is redundant and
 * is the one part of the design that cannot be made to look the same across themes.
 */
.bss-pay-provider__control input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bss-pay-provider__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1 1 auto;
}

.bss-pay-provider__title {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--bss-pay-title, inherit);
	font-size: var(--bss-pay-title-size, inherit);
	font-weight: var(--bss-pay-title-weight, 600);
	line-height: 1.35;
}

.bss-pay-provider__subtitle {
	color: var(--bss-pay-description, #6b7280);
	font-size: var(--bss-pay-description-size, 0.875em);
	line-height: 1.45;
}

.bss-pay-provider__control:has(input[type="radio"]:checked) {
	border-color: var(--bss-pay-border-selected, var(--bde-brand-primary-color, #2563eb));
	background: var(--bss-pay-tint, color-mix(in srgb, var(--bss-pay-border-selected, var(--bde-brand-primary-color, #2563eb)) 8%, transparent));
	box-shadow: inset 0 0 0 1px var(--bss-pay-border-selected, var(--bde-brand-primary-color, #2563eb));
}

.bss-pay-provider__control:has(input[type="radio"]:checked) .bss-pay-provider__title {
	color: var(--bss-pay-accent, var(--bde-brand-primary-color, #2563eb));
}

.bss-pay-provider__control:focus-within {
	outline: 2px solid var(--bss-pay-accent, var(--bde-brand-primary-color, #2563eb));
	outline-offset: 2px;
}

/*
 * The honest fallback, identical in shape to the plan cards'. Hiding the radio is only safe where
 * the card can show the selection instead, and that needs `:has()`. Where it is unsupported the
 * radio comes back and the card lays out beside it — plainer, and never a payment form with no
 * visible selection at all.
 */
@supports not (selector(:has(*))) {
	.bss-pay-provider__control input[type="radio"] {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		flex: 0 0 auto;
	}
}

.bss-pay-icon {
	display: inline-block;
	height: var(--bss-pay-icon-size, 20px);
	width: auto;
	max-width: var(--bss-pay-icon-max, 48px);
	vertical-align: middle;
	object-fit: contain;
}

/*
 * When there is one provider, it is a statement rather than a control. It follows the plan cards
 * with no heading of its own — there is nothing to head — so it carries its own top margin instead
 * of inheriting the spacing a heading would have provided.
 */
.bss-pay-sole-provider {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	color: var(--bss-pay-description, #6b7280);
}

/* -------------------------------------------------------------------------------------------- */
/* Fee and discount badges                                                                       */
/* -------------------------------------------------------------------------------------------- */

/*
 * BUSINESS RULE: a discount and a fee never look alike. They are the two directions money can move
 * and the customer is reading quickly; of the two possible misreadings, believing a surcharge is a
 * saving is the one that ends in a chargeback. Green reads as a gain and a muted neutral as a cost,
 * and the WORDS carry it too — "Save 1%" against "+2%" — because colour alone fails for anyone who
 * cannot distinguish these two.
 */
.bss-pay-badge {
	flex: 0 0 auto;
	margin-inline-start: auto;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 0.8125em;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

/*
 * A provider's badge is rendered for every plan and hidden for the ones with no rule, so the script
 * can swap it without creating elements. Without this the pill would still occupy its flex slot.
 */
.bss-pay-badge[hidden] {
	display: none;
}

.bss-pay-badge--discount {
	background: rgba(22, 163, 74, 0.12);
	color: #15803d;
}

.bss-pay-badge--fee {
	background: rgba(107, 114, 128, 0.14);
	color: #4b5563;
}

/*
 * On the express button the badge sits inside a dark, saturated control, where the tinted pills
 * above would disappear. It borrows the button's own foreground instead.
 */
.bss-pay-express-button .bss-pay-badge {
	margin-inline-start: 0;
	background: rgba(255, 255, 255, 0.18);
	color: var(--bss-pay-express-fg, #ffffff);
}

/* -------------------------------------------------------------------------------------------- */
/* EMI                                                                                           */
/* -------------------------------------------------------------------------------------------- */

.bss-pay-emi {
	margin-top: 14px;
}

.bss-pay-emi[hidden] {
	display: none;
}

.bss-pay-emi select {
	max-width: 100%;
}

/* -------------------------------------------------------------------------------------------- */
/* The express button                                                                            */
/* -------------------------------------------------------------------------------------------- */

/*
 * Sized and coloured to stand on its own. It appears in the cart and at the top of the checkout,
 * both places where it is the only thing offering to complete a purchase, so it is styled as a
 * primary action rather than as a link that happens to be clickable.
 */
.bss-pay-express-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: var(--bss-pay-express-height, 48px);
	padding: 12px 20px;
	border: 0;
	border-radius: var(--bss-pay-express-radius, 8px);
	background: var(--bss-pay-express-bg, var(--bde-brand-primary-color, #111827));
	color: var(--bss-pay-express-fg, #ffffff);
	font-size: var(--bss-pay-express-size, 1rem);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: opacity 0.15s ease, transform 0.05s ease;
}

.bss-pay-express-button:hover {
	opacity: 0.9;
}

.bss-pay-express-button:active {
	transform: translateY(1px);
}

.bss-pay-express-button:focus-visible {
	outline: 3px solid var(--bss-pay-express-bg, var(--bde-brand-primary-color, #111827));
	outline-offset: 2px;
}

.bss-pay-express-button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.bss-pay-express-button__icon {
	height: var(--bss-pay-icon-size, 20px);
	width: auto;
	max-width: var(--bss-pay-icon-max, 48px);
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.bss-pay-plan__control,
	.bss-pay-provider__control,
	.bss-pay-express-button {
		transition: none;
	}

	.bss-pay-express-button:active {
		transform: none;
	}
}

/* ============================================================================================== */
/* "Complete your payment" — an unpaid Manual UPI order's thank-you page (CK-12)                    */
/* ============================================================================================== */

/*
 * One job: get the order paid. The amount large, then ONE primary action chosen by how the customer
 * points: a finger gets the button that opens their UPI app (a phone cannot scan its own screen), a
 * mouse gets the QR code (a laptop cannot open a UPI app). The other route is always one tap away in
 * "App didn't open?". Colours: #1d4ed8 on white 6.7:1; #8a4b00 on #fff8eb 6.3:1.
 */
.bss-pay-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  background: #fff;
  max-width: 40rem;
}

.bss-pay-page__eyebrow {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: #8a4b00;
}

.bss-pay-page__title {
  margin: -0.5rem 0 0;
  font-size: 1.5rem;
  line-height: 1.25;
}

.bss-pay-page__amount {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
}

.bss-pay-page__amount .bss-pay-page__label {
  flex: 1 0 100%;
}

.bss-pay-page__label {
  display: block;
  font-size: 0.875rem;
  opacity: 0.75;
}

.bss-pay-page__figure {
  font-size: 2rem;
  line-height: 1.1;
}

/* Two classes and the element: Breakdance's global `.breakdance a` colour (found on the user-test
   shop, dark grey on this blue) must not win over the button's own white. */
.bss-pay-page a.bss-pay-page__app {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 56px;
  padding: 0 1rem;
  border-radius: 12px;
  background: #1d4ed8;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}

.bss-pay-page a.bss-pay-page__app:hover,
.bss-pay-page a.bss-pay-page__app:focus-visible {
  background: #1e3a8a;
  color: #fff;
}

/* Stands in for NPCI's UPI mark until the official artwork is added as an asset. */
.bss-pay-page__upi {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.5rem;
  border-radius: 6px;
  background: #fff;
  color: #1b2333;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.bss-pay-page__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.bss-pay-page__qr svg {
  width: 240px;
  height: 240px;
}

.bss-pay-page__qr-text {
  margin: 0;
  font-size: 0.875rem;
}

.bss-pay-page__more,
.bss-pay-page__show-qr {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.bss-pay-page__more > summary,
.bss-pay-page__show-qr > summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-weight: 700;
  cursor: pointer;
}

.bss-pay-page__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.bss-pay-page__value {
  overflow-wrap: anywhere;
}

.bss-pay-page__value--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.bss-pay-page__copy {
  flex: none;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  background: #fff;
  color: #1d4ed8;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.bss-pay-page__next {
  padding: 0.85rem 1rem;
  border: 1px solid #f3d29a;
  border-radius: 10px;
  background: #fff8eb;
}

.bss-pay-page__next p {
  margin: 0.25rem 0 0;
}

/* A finger (phone, tablet): the app button leads; the QR waits behind "Show QR code". */
@media (hover: none), (pointer: coarse) {
  .bss-pay-page > .bss-pay-page__qr {
    display: none;
  }
}

/* A mouse (computer): the QR leads; the app button would open nothing. */
@media (hover: hover) and (pointer: fine) {
  .bss-pay-page a.bss-pay-page__app,
  .bss-pay-page .bss-pay-page__show-qr {
    display: none;
  }
}

/*
 * Why cash on delivery is missing, when the order limit is the reason (owner, 2026-10-25). Set as
 * supporting text, the same size and colour as a card's description: it explains the choice above
 * it rather than being a choice of its own.
 */
.bss-pay-notice {
	margin: 8px 0 0;
	color: var(--bss-pay-description, #6b7280);
	font-size: var(--bss-pay-description-size, 0.875em);
	line-height: 1.45;
}