/**
 * Checkout styles for the Bamboo card method, shared by the classic checkout and Blocks.
 *
 * Both checkouts print the same class names on purpose, so this file is the only place
 * where the two can drift apart visually.
 *
 * ## This has to hold up in a theme nobody here has seen
 *
 * The store's theme is not ours and never will be, so the rule is: **never depend on what
 * the theme does or does not do.** That is not achieved by piling on specificity, and it is
 * worth being blunt about why — specificity is compared as a tuple, not summed, so **one ID
 * beats any number of classes.** A theme that ships `#content ol { padding: 0 }` cannot be
 * outbid, ever. `!important` would win and is refused on purpose: it is the one thing that
 * takes away the shop owner's ability to correct us in their own child theme.
 *
 * What actually works is knowing which of the two kinds of property is in play:
 *
 * - **Inherited properties** — `color`, `font-*`, `line-height`, `text-align`, `list-style`.
 *   Declaring one **on our own element** wins over any theme rule that styles an *ancestor*,
 *   whatever its specificity, because inheritance only reaches an element that has no
 *   declaration of its own. This is why every element below states its own text properties
 *   even when the value looks like the default. A specificity fight only happens if the theme
 *   targets *the same element* we do.
 * - **Non-inherited properties** — `margin`, `padding`, `border`, `background`, `display`.
 *   Here there is a real fight, and it can be lost. So the defense is to **not depend on the
 *   properties themes reset**: the step indent is a `margin`, never a `padding`, because
 *   resetting list padding is what themes do and resetting margins is not.
 *
 * And when a property is one the theme will simply take — `list-style` is the example that
 * cost three releases — the answer is **not to need it**: the step numbers are text in the
 * markup, which no stylesheet can reach. Choosing different markup beats winning a cascade.
 *
 * Two things are inherited **on purpose** and must stay that way: `font-family` and the
 * surrounding text color outside our own callout. A payment method typeset in a different
 * face from the rest of the checkout looks broken, not independent. Independence is about
 * structure and legibility, not about refusing to look like the shop.
 *
 * **Every selector is scoped to the wrapper** — `.markenetics-bamboo-fields` in the classic
 * checkout, `.markenetics-bamboo-blocks` in the block one — and never written as a bare
 * class. Two classes outbid the one-class-plus-one-type selectors themes reset content with.
 * Keep the pattern when adding a rule. Logical properties (`margin-inline-start`,
 * `border-inline-start-width`) and not `left`/`right`: WordPress themes ship an RTL
 * stylesheet, and a hardcoded left indent is the same class of bug as a hardcoded padding.
 *
 * `tests/theme-hostility.html` renders this file against a deliberately hostile theme. Open
 * it after touching anything here.
 */

/* --------------------------------------------------------------------------
 * Test-mode callout.
 *
 * Colors are fixed rather than inherited, and that is the point: the element sets its
 * own background, so it also has to set the text color, or a dark theme would leave
 * near-white text on pale yellow. The pair is WordPress's own warning yellow, which
 * reads as «pay attention» without the alarm of a red — nothing is broken here, the
 * store is simply not charging.
 *
 * `background` as a shorthand, not `background-color`: it resets `background-image` too, so a
 * theme's gradient or texture on the surrounding box cannot show through the callout.
 * `box-sizing` is declared because a theme that sets `content-box` on divs — some do, to fix
 * their own grid — would have the padding widen the box until it overflowed its column.
 * -------------------------------------------------------------------------- */

.markenetics-bamboo-fields .markenetics-bamboo-testmode,
.markenetics-bamboo-blocks .markenetics-bamboo-testmode {
	box-sizing: border-box;
	margin: 0 0 1em;
	padding: .75em 1em;
	border: 1px solid #f0b849;
	border-inline-start-width: 4px;
	border-radius: 3px;
	background: #fff8e5;
	color: #1e1e1e;
	font-size: .95em;
	line-height: 1.5;
	text-align: start;
}

/*
 * Weight and not uppercase. The label used to be «MODO DE PRUEBA»; caps read as
 * shouting, are slower to read, and some screen readers spell them out letter by letter.
 *
 * The colon lives in the translated string and not in a `::after`, so the sentence still
 * has its punctuation if this file ever fails to load — and so a locale that punctuates
 * differently can say so.
 *
 * `color: inherit` because `strong` is a favourite of theme stylesheets, and a red or brand
 * coloured label on pale yellow is the one combination that could stop being readable.
 */
.markenetics-bamboo-fields .markenetics-bamboo-testmode__label,
.markenetics-bamboo-blocks .markenetics-bamboo-testmode__label {
	color: inherit;
	font-size: 1em;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
 * The two steps of the card flow.
 * -------------------------------------------------------------------------- */

.markenetics-bamboo-fields .markenetics-bamboo-steps__title,
.markenetics-bamboo-blocks .markenetics-bamboo-steps__title {
	margin: 0 0 .4em;
	padding: 0;
	color: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.5;
	text-align: start;
}

/*
 * **The steps are divs with ARIA roles and the numbers live in the markup.** Not an `<ol>`.
 *
 * This is the third attempt and the reasoning is worth keeping, because the first two each
 * looked right and each broke on a real store.
 *
 * `1.4.4` used `<ol>` with `padding-left`. Divi resets list padding from a selector list that
 * includes an *ID* — `#left-area ol, .entry-content ol, … { padding: 0 0 23px }` — so the
 * numbers ended up flush against the left edge.
 *
 * `1.4.5` moved the indent to `margin`, which Divi does not touch, and that fixed Divi. But it
 * still trusted `list-style: decimal` for the numbers themselves, and `list-style` is exactly
 * the kind of property a theme takes for itself: a single `ol { list-style: none }` from an ID
 * or with `!important` erases the numbering, and in the `1.4.6` a shop on another theme lost
 * it. The mistake was reasoning about *one* hostile theme instead of the class of them.
 *
 * Divs are immune to all of it. Themes reset `ol`, `ul` and `li`; they do not reset
 * `div[role="listitem"]`. And **the number is text, which no stylesheet can remove** — the
 * property that made this fragile is no longer in play at all. What is given up is native list
 * semantics, and `role="list"` / `role="listitem"` is the standard replacement, the same one
 * WooCommerce Blocks uses in its own components. `aria-hidden` on the number keeps a screen
 * reader from announcing «one dot» before an item the role already numbers.
 *
 * The layout degrades cleanly too: if a theme somehow wins `display`, the flex row falls back
 * to a block div with two inline spans, which reads «1. Completa los datos…» on one line —
 * the same sentence, only without the hanging indent.
 */
.markenetics-bamboo-fields .markenetics-bamboo-steps,
.markenetics-bamboo-blocks .markenetics-bamboo-steps {
	margin: 0 0 1.2em;
	margin-inline-start: 1.6em;
	padding: 0;
	text-align: start;
}

.markenetics-bamboo-fields .markenetics-bamboo-step,
.markenetics-bamboo-blocks .markenetics-bamboo-step {
	display: flex;
	margin: 0 0 .3em;
	padding: 0;
	color: inherit;
	font-size: 1em;
	line-height: 1.5;
	text-align: start;
}

/*
 * `margin-inline-end` for the gap and not `gap`, which would vanish along with `display: flex`
 * in the fallback above and leave «1.Completa» with no space in it.
 */
.markenetics-bamboo-fields .markenetics-bamboo-step__number,
.markenetics-bamboo-blocks .markenetics-bamboo-step__number {
	flex: 0 0 auto;
	margin-inline-end: .4em;
	color: inherit;
	font-size: 1em;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.markenetics-bamboo-fields .markenetics-bamboo-step__text,
.markenetics-bamboo-blocks .markenetics-bamboo-step__text {
	color: inherit;
	font-size: 1em;
}

/* --------------------------------------------------------------------------
 * Card confirmed.
 *
 * The classic checkout hides this with the `hidden` attribute and Blocks renders it
 * empty, so it must not be given a `display` value: that would override `hidden` and
 * leave an empty line sitting under the form. Only the filled state is styled.
 * -------------------------------------------------------------------------- */

.markenetics-bamboo-fields .markenetics-bamboo-confirmed:not(:empty),
.markenetics-bamboo-blocks .markenetics-bamboo-confirmed:not(:empty) {
	margin: .6em 0 0;
	padding: 0;
	color: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.5;
	text-align: start;
}

/*
 * `hidden` is a UA-stylesheet `display: none`, which means the weakest declaration on the
 * page: a theme with `p { display: block }` un-hides the confirmation line and the «use
 * another card» button, and the shopper gets an empty paragraph and a button that does
 * nothing yet. Restating it scoped to our wrapper covers every theme that does not reach for
 * an ID.
 */
.markenetics-bamboo-fields [hidden],
.markenetics-bamboo-blocks [hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
 * Deliberately not styled: `.markenetics-bamboo-redo`.
 *
 * The «use another card» button inherits the theme's button styling, and that is correct
 * rather than an omission — a button that matches every other button in the shop is what a
 * shopper needs, and no palette we picked here could match a theme we have never seen.
 * -------------------------------------------------------------------------- */