/**
 * Rebill Memberships — front-end styles.
 *
 * Design stance: this ships inside somebody else's theme, so it borrows the
 * theme's typography and colour and only defines structure, state and rhythm.
 * Everything is expressed relative to `currentColor` and the inherited font
 * size, which means it adapts to a light or dark theme without a second
 * palette, and never fights the site's identity.
 *
 * Contrast: secondary text sits at 78% of the text colour (not the usual 60-70%
 * "muted gray"), which keeps it above 4.5:1 on the themes this has to survive.
 */

/* Every element this plugin renders, and nothing else.
 *
 * These used to be declared on a hand-kept list of five root classes, which meant
 * anything rendered outside one of them — a profile form, a lone action button in a
 * theme's own paragraph — resolved every `var(--rm-*)` to invalid and silently lost
 * the declaration. A button dropped into a page came out with zero padding, square
 * corners and no hover, because `padding` and `border-radius` fall back to their
 * initial values rather than to something sensible.
 *
 * Matching the plugin's own class prefix fixes that for every element that exists
 * now and every one added later, while still keeping the scale out of the theme's
 * scope. `:where()` holds it at zero specificity so a theme can always win. */
:where([class*="rebill-mem-"]) {
	--rm-space-1: 0.25rem;
	--rm-space-2: 0.5rem;
	--rm-space-3: 0.75rem;
	--rm-space-4: 1rem;
	--rm-space-5: 1.5rem;
	--rm-space-6: 2rem;

	--rm-radius: 8px;
	--rm-radius-sm: 5px;

	/* Derived from the inherited text colour: one source of truth. */
	--rm-line: color-mix(in srgb, currentColor 16%, transparent);
	--rm-line-strong: color-mix(in srgb, currentColor 38%, transparent);
	--rm-wash: color-mix(in srgb, currentColor 5%, transparent);
	--rm-secondary: color-mix(in srgb, currentColor 78%, transparent);

	/* Four type roles, deliberately far apart. Eight near-identical steps read as
	   no hierarchy at all, which is what happened when field labels ended up the
	   same weight as the plan name they sit under. */
	--rm-text-meta: 0.8em;
	--rm-text-support: 0.9em;
	--rm-text-title: 1.15em;

	--rm-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quart */
	--rm-duration: 160ms;
}

/* Buttons ------------------------------------------------------------------
   The plugin cannot rely on a theme having `.button`, and `button-link-delete`
   only exists in wp-admin. So the plugin owns its button vocabulary: one shape,
   two emphases, every state. Kept unstyled-adjacent so it reads as part of the
   host theme rather than a bolted-on widget. */

.rebill-mem-btn {
	/* Full width where a thumb needs the target and the column is narrow. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rm-space-2);
	/* 44px floor: this is a touch target on phones. */
	min-height: 44px;
	padding: var(--rm-space-2) var(--rm-space-4);
	border: 1px solid currentColor;
	border-radius: var(--rm-radius-sm);
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--rm-duration) var(--rm-ease),
		border-color var(--rm-duration) var(--rm-ease),
		opacity var(--rm-duration) var(--rm-ease);
}

.rebill-mem-btn:hover {
	background: var(--rm-wash);
}

.rebill-mem-btn:focus-visible {
	/* Never remove the indicator; make it unmistakable instead. */
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.rebill-mem-btn:active {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.rebill-mem-btn[disabled],
.rebill-mem-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: default;
}

/* Emphasis comes from border weight and type weight, not from a filled surface:
   a `currentColor` fill would need an inverted label, and there is no way to
   know the host theme's page colour well enough to guarantee 4.5:1 on it. */
.rebill-mem-btn--strong {
	border-width: 2px;
	font-weight: 700;
}

.rebill-mem-btn--quiet {
	border-color: var(--rm-line-strong);
	font-weight: 500;
}

/* Locked content ---------------------------------------------------------
   Reading order: why it is closed, then what each plan costs, then one action
   per plan. The plan row is a grid rather than a flex row because the action can
   be either a link or a whole form, and a form must never be laid out as a row
   of squeezed columns. */

.rebill-mem-locked {
	border: 1px solid var(--rm-line-strong);
	border-radius: var(--rm-radius);
	padding: var(--rm-space-5);
	margin: var(--rm-space-5) 0;
}

.rebill-mem-locked__title {
	/* More space below than above: the title owns the list that follows. */
	margin: 0 0 var(--rm-space-5);
	font-weight: 700;
	font-size: var(--rm-text-title);
	line-height: 1.3;
}

/* The headline is merchant-authored and arrives wrapped in paragraphs. So the
   outer margin is owned by the container while the paragraphs only space each
   other, and balancing is asked of the paragraphs themselves — asking it of a
   wrapper does nothing. */
.rebill-mem-locked__title > * {
	text-wrap: balance;
}

.rebill-mem-locked__title > :first-child {
	margin-top: 0;
}

.rebill-mem-locked__title > :last-child {
	margin-bottom: 0;
}

/* Teaser ------------------------------------------------------------------
   The visible sliver of a restricted post. It has to read as an interrupted
   sentence rather than a short post, so it fades into the gate below it instead
   of ending on a clean edge. */

.rebill-mem-teaser > :last-child {
	margin-bottom: 0;
}

/* Faded with a mask rather than a gradient overlay: the colour behind the text
   belongs to the theme and is not knowable from here, and a fade painted in the
   wrong colour looks worse than none. A mask fades whatever is actually there. */
@supports (mask-image: linear-gradient(#000, transparent)) {
	.rebill-mem-teaser {
		mask-image: linear-gradient(to bottom, #000 65%, transparent);
	}
}

/* The fade costs contrast on the last lines, so anyone who asked for more of it
   gets a hard cut instead. */
@media (prefers-contrast: more) {
	.rebill-mem-teaser {
		mask-image: none;
	}
}

/* The gate follows immediately: the reader should feel the cut, not a gap. */
.rebill-mem-teaser + .rebill-mem-locked {
	margin-top: var(--rm-space-4);
}

.rebill-mem-locked__plans {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--rm-space-5);
}

.rebill-mem-locked__plans li {
	display: grid;
	/* The action needs air from the plan it belongs to; the fields inside it need
	   less. Rhythm comes from that contrast, not from one repeated gap. */
	gap: var(--rm-space-4);
	padding-top: var(--rm-space-5);
	border-top: 1px solid var(--rm-line);
}

.rebill-mem-locked__plans li:first-child {
	padding-top: 0;
	border-top: 0;
}

/* Name and price share a line and separate to the edges; they are one group. */
.rebill-mem-locked__plan-head {
	display: flex;
	gap: var(--rm-space-2) var(--rm-space-4);
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
}

.rebill-mem-locked__plan-name {
	font-weight: 600;
}

.rebill-mem-locked__plan-price {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* The action owns its own row at full width: enough for a button, and enough for
   the signup form's stacked fields. */
.rebill-mem-locked__plan-action {
	display: block;
}

.rebill-mem-locked__plan-action form {
	margin: 0;
}

.rebill-mem-locked__login {
	margin: var(--rm-space-5) 0 0;
	padding-top: var(--rm-space-4);
	border-top: 1px solid var(--rm-line);
	font-size: var(--rm-text-support);
	color: var(--rm-secondary);
}

/* Visually hidden, still submitted: used by the signup honeypot. Clipped in
   place rather than pushed off-screen, which can add horizontal scroll. */

.rebill-mem-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Signup form ------------------------------------------------------------- */

.rebill-mem-signup {
	display: grid;
	gap: var(--rm-space-4);
	max-width: 32rem;
}

.rebill-mem-field {
	display: grid;
	gap: var(--rm-space-1);
	margin: 0;
}

.rebill-mem-field label {
	font-weight: 600;
	font-size: var(--rm-text-support);
}

.rebill-mem-field input {
	/* Inherit the theme's input styling where it exists; only guarantee that it
	   fits its column, sizes predictably, and stays tappable. */
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	max-width: 100%;
	height: auto;
	font: inherit;
}

.rebill-mem-field .description,
.rebill-mem-hint {
	font-size: var(--rm-text-meta);
	color: var(--rm-secondary);
	text-wrap: pretty;
}

/* A theme is free to style these inputs, but not to leave them with no focus
   indicator: the plugin guarantees one on its buttons and has to do the same for
   the fields somebody types their card-free signup into. Only applied when the
   theme has not drawn its own. */
.rebill-mem-field input:focus-visible,
.rebill-mem-auth input:focus-visible,
.rebill-mem-switch__form select:focus-visible,
.rebill-mem-form input:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

/* Member forms ------------------------------------------------------------
   Profile editing and registration. Same column width and rhythm as the signup
   form, so a member moving between them is not re-learning the layout. */

.rebill-mem-form {
	display: grid;
	gap: var(--rm-space-4);
	max-width: 32rem;
	margin: var(--rm-space-5) 0;
}

.rebill-mem-form form {
	display: grid;
	gap: var(--rm-space-4);
	margin: 0;
}

/* A password change is a separate decision from a name change, and the border
   says so without a heading competing with the page's own. */
.rebill-mem-fieldset {
	display: grid;
	gap: var(--rm-space-4);
	margin: 0;
	padding: var(--rm-space-4) 0 0;
	border: 0;
	border-top: 1px solid var(--rm-line);
}

.rebill-mem-fieldset legend {
	padding: 0;
	font-weight: 600;
	font-size: var(--rm-text-support);
}

/* An action dropped into a theme's own layout must not claim a whole row. */
.rebill-mem-inline-form {
	display: inline;
	margin: 0;
}

.rebill-mem-signup__submit {
	margin: 0;
}

.rebill-mem-secure {
	margin: 0;
	font-size: var(--rm-text-meta);
	color: var(--rm-secondary);
	text-wrap: pretty;
}

/* Auth forms --------------------------------------------------------------
   Core's own markup, so only spacing and the 44px input floor are set here. */

.rebill-mem-auth {
	display: grid;
	gap: var(--rm-space-3);
	max-width: 32rem;
}

.rebill-mem-auth .login-username,
.rebill-mem-auth .login-password,
.rebill-mem-auth .login-remember,
.rebill-mem-auth .login-submit {
	margin: 0 0 var(--rm-space-3);
}

.rebill-mem-auth label {
	font-weight: 600;
	font-size: var(--rm-text-support);
}

.rebill-mem-auth input[type="text"],
.rebill-mem-auth input[type="password"] {
	min-height: 44px;
	max-width: 100%;
	font: inherit;
}

.rebill-mem-auth .login-remember label {
	font-weight: 400;
}

.rebill-mem-auth__link {
	margin: 0;
	font-size: var(--rm-text-support);
	color: var(--rm-secondary);
}

/* Plans list --------------------------------------------------------------
   Rows, not a card grid: plan descriptions are never the same length, and a
   vertical comparison is easier to scan than three boxes pretending to match. */

.rebill-mem-plans {
	display: grid;
	gap: var(--rm-space-5);
	margin: var(--rm-space-5) 0;
}

.rebill-mem-plan {
	padding-top: var(--rm-space-5);
	border-top: 1px solid var(--rm-line);
	display: grid;
	gap: var(--rm-space-3);
}

.rebill-mem-plan:first-child {
	padding-top: 0;
	border-top: 0;
}

.rebill-mem-plan__head {
	display: flex;
	gap: var(--rm-space-2) var(--rm-space-4);
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
}

.rebill-mem-plan__title {
	margin: 0;
	font-size: var(--rm-text-title);
	line-height: 1.25;
	text-wrap: balance;
}

.rebill-mem-plan__price {
	margin: 0;
	font-weight: 600;
	/* Same treatment as every other amount in the plugin: prices stacked in a
	   comparison have to align on the decimal, not drift by digit width. */
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.rebill-mem-plan__description {
	margin: 0;
	/* Prose still reads best under ~70ch, even in a pricing row. */
	max-width: 65ch;
	color: var(--rm-secondary);
	text-wrap: pretty;
}

/* Author-written markup: the outer margins are owned here so a bullet list and a
   paragraph sit the same distance from the price above them. */
.rebill-mem-plan__description > :first-child {
	margin-top: 0;
}

.rebill-mem-plan__description > :last-child {
	margin-bottom: 0;
}

/* The billing terms that change the decision — a trial, a signup fee, a fixed
   number of payments. Stated plainly, because these are exactly the details a
   buyer discovers too late and charges back over. */
.rebill-mem-plan__terms {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--rm-space-2);
	font-size: var(--rm-text-support);
}

.rebill-mem-plan__terms li {
	position: relative;
	padding-left: 1.15em;
}

.rebill-mem-plan__terms li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.35em;
	height: 0.35em;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.55;
}

/* Comparison table --------------------------------------------------------
   From about three plans up, the question stops being "do I want this" and
   becomes "which of these", which is a side-by-side job. Below that width the
   columns would be too narrow to read, so it falls back to the same rows. */

@media (min-width: 48em) {
	/* auto-fit rather than one column per plan: `grid-auto-flow: column` divides
	   the width by however many plans exist, so six plans at tablet width became
	   six 120px columns with the price wrapping mid-number. This fits as many
	   readable columns as the width allows and wraps the rest onto a second row. */
	.rebill-mem-plans--table {
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		gap: var(--rm-space-4);
		align-items: stretch;
	}

	/* Each plan becomes a bounded cell. A left-only hairline cannot survive
	   wrapping — the first plan of the second row would carry a divider with
	   nothing to its left — so the boundary goes all the way round. */
	.rebill-mem-plans--table .rebill-mem-plan {
		padding: var(--rm-space-5);
		border: 1px solid var(--rm-line);
		border-radius: var(--rm-radius);
		/* The action sits on the same line across every column regardless of how much
		   each plan has to say about itself. */
		grid-template-rows: auto auto 1fr auto;
		align-content: start;
	}

	/* Stacked, not spread: a column is too narrow for name and price to share a
	   line without one of them wrapping mid-word. */
	.rebill-mem-plans--table .rebill-mem-plan__head {
		display: grid;
		gap: var(--rm-space-1);
	}

	.rebill-mem-plans--table .rebill-mem-plan__price {
		font-size: var(--rm-text-title);
		white-space: normal;
	}

	.rebill-mem-plans--table .rebill-mem-plan__description {
		max-width: none;
	}

	.rebill-mem-plans--table .rebill-mem-plan__action {
		align-self: end;
	}

	/* The plan they already hold recedes without losing its outline, so the row
	   still reads as a comparison rather than as a gap. */
	.rebill-mem-plans--table .rebill-mem-plan--current {
		background: var(--rm-wash);
	}
}

.rebill-mem-plan__action .rebill-mem-signup {
	max-width: none;
}

.rebill-mem-plan__current {
	margin: 0;
	font-weight: 600;
}

.rebill-mem-plan--current {
	/* The plan they already have recedes instead of competing for the click. */
	color: var(--rm-secondary);
}

/* Member area ------------------------------------------------------------- */

.rebill-mem-account {
	display: grid;
	gap: var(--rm-space-5);
}

/* Nothing to show yet ------------------------------------------------------
   Not a smaller version of the populated state: an empty member area is the one
   screen where the only useful content is the way out of it. So it gets the same
   bounded surface a real membership gets, and the route sits inside it. */

.rebill-mem-empty {
	display: grid;
	gap: var(--rm-space-4);
	justify-items: start;
	padding: var(--rm-space-5);
	border: 1px dashed var(--rm-line-strong);
	border-radius: var(--rm-radius);
}

.rebill-mem-empty p {
	margin: 0;
}

.rebill-mem-empty__title {
	font-weight: 600;
	font-size: var(--rm-text-title);
	line-height: 1.3;
	text-wrap: balance;
}

.rebill-mem-empty__body {
	max-width: 55ch;
	color: var(--rm-secondary);
	text-wrap: pretty;
}

.rebill-mem-membership {
	border: 1px solid var(--rm-line-strong);
	border-radius: var(--rm-radius);
	padding: var(--rm-space-5);
}

/* A membership that needs attention gets weight, not a colour the theme never
   agreed to. Inset shadow rather than a thicker border so nothing reflows. */
.rebill-mem-membership--on-hold,
.rebill-mem-membership--pending {
	box-shadow: inset 0 0 0 1px var(--rm-line-strong);
}

.rebill-mem-membership__head {
	display: flex;
	gap: var(--rm-space-3);
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: var(--rm-space-5);
}

.rebill-mem-membership__title {
	margin: 0;
	font-size: var(--rm-text-title);
	line-height: 1.25;
	text-wrap: balance;
}

.rebill-mem-badge {
	flex: none;
	padding: 0.15em 0.65em;
	border: 1px solid var(--rm-line-strong);
	border-radius: 999px;
	font-size: var(--rm-text-meta);
	line-height: 1.5;
	white-space: nowrap;
}

/* State reads through weight and fill, never colour alone: the host theme owns
   the palette, and this has to stay legible for colour-blind members too. */
.rebill-mem-badge--active {
	font-weight: 600;
	background: var(--rm-wash);
}

.rebill-mem-badge--on-hold,
.rebill-mem-badge--pending {
	font-weight: 700;
	background: color-mix(in srgb, currentColor 12%, transparent);
	border-color: currentColor;
}

.rebill-mem-badge--cancelled,
.rebill-mem-badge--expired {
	color: var(--rm-secondary);
}

/* Definition list: these are label/value pairs, so they get the element that
   says so. Grid keeps the columns from collapsing on narrow screens. */
.rebill-mem-membership__meta {
	margin: 0 0 var(--rm-space-5);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--rm-space-4) var(--rm-space-5);
}

.rebill-mem-membership__meta > div {
	display: flex;
	flex-direction: column;
	gap: var(--rm-space-1);
	min-width: 0;
}

.rebill-mem-membership__meta dt {
	font-size: var(--rm-text-meta);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rm-secondary);
}

.rebill-mem-membership__meta dd {
	margin: 0;
	font-weight: 500;
	/* Long card brands and plan names must not blow out the grid. */
	overflow-wrap: break-word;
}

.rebill-mem-membership__actions {
	display: flex;
	gap: var(--rm-space-3);
	flex-wrap: wrap;
	align-items: center;
}

.rebill-mem-membership__actions form {
	margin: 0;
}

/* Plan switcher -----------------------------------------------------------
   Collapsed by default: changing plan is a deliberate act, not something to put
   in front of every member on every visit. */

.rebill-mem-switch {
	margin-top: var(--rm-space-5);
	padding-top: var(--rm-space-4);
	border-top: 1px solid var(--rm-line);
}

.rebill-mem-switch summary {
	cursor: pointer;
	font-weight: 600;
	border-radius: var(--rm-radius-sm);
}

.rebill-mem-switch summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.rebill-mem-switch__form {
	display: grid;
	gap: var(--rm-space-3);
	margin-top: var(--rm-space-4);
	max-width: 32rem;
}

.rebill-mem-switch__form select {
	min-height: 44px;
	max-width: 100%;
	font: inherit;
}

.rebill-mem-switch__form p {
	margin: 0;
}

.rebill-mem-switch__note {
	font-size: var(--rm-text-support);
	color: var(--rm-secondary);
	text-wrap: pretty;
}

/* Payment history --------------------------------------------------------- */

.rebill-mem-payments {
	margin-top: var(--rm-space-5);
	padding-top: var(--rm-space-4);
	border-top: 1px solid var(--rm-line);
	font-size: var(--rm-text-support);
}

.rebill-mem-payments summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--rm-secondary);
	border-radius: var(--rm-radius-sm);
	transition: color var(--rm-duration) var(--rm-ease);
}

.rebill-mem-payments summary:hover {
	color: inherit;
}

.rebill-mem-payments summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.rebill-mem-payments__scroll {
	/* Tables are the one thing here allowed to scroll on its own. */
	overflow-x: auto;
	margin-top: var(--rm-space-4);
}

.rebill-mem-payments__table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.rebill-mem-payments__table th,
.rebill-mem-payments__table td {
	text-align: left;
	padding: var(--rm-space-2) var(--rm-space-3);
	border-bottom: 1px solid var(--rm-line);
	white-space: nowrap;
}

.rebill-mem-payments__table th {
	font-size: var(--rm-text-meta);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rm-secondary);
}

.rebill-mem-payments__table tr:last-child td {
	border-bottom: 0;
}

/* Notices -----------------------------------------------------------------
   Tinted surface plus a full hairline border. Deliberately NOT a coloured
   left stripe: that pattern is decoration masquerading as semantics, and it
   collapses into noise once a page shows two of them. */

.rebill-mem-notice {
	margin: 0 0 var(--rm-space-4);
	padding: var(--rm-space-3) var(--rm-space-4);
	border: 1px solid var(--rm-line-strong);
	border-radius: var(--rm-radius-sm);
	background: var(--rm-wash);
	font-size: 0.95em;
}

.rebill-mem-notice--error,
.rebill-mem-notice--warning {
	/* Urgency through contrast and weight, so it survives any theme palette. */
	border-color: currentColor;
	background: color-mix(in srgb, currentColor 8%, transparent);
	font-weight: 600;
}

.rebill-mem-notice--success {
	border-color: var(--rm-line-strong);
	font-weight: 600;
}

.rebill-mem-notice--info {
	color: var(--rm-secondary);
}

.rebill-mem-membership .rebill-mem-notice {
	margin-bottom: var(--rm-space-5);
}

/* Motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.rebill-mem-btn,
	.rebill-mem-payments summary {
		transition: none;
	}
}

/* Admin ------------------------------------------------------------------- */

.rebill-mem-status--on-hold,
.rebill-mem-status--pending {
	font-weight: 600;
}

/* Narrow columns ---------------------------------------------------------- */

@media (max-width: 30rem) {
	.rebill-mem-signup__submit .rebill-mem-btn,
	.rebill-mem-locked__plan-action .rebill-mem-btn,
	.rebill-mem-form form > p > .rebill-mem-btn {
		width: 100%;
	}
}

/* Per-block gate ------------------------------------------------------------
   What replaces a restricted block when the author chose a message over hiding
   it. Deliberately quiet: it stands in for one block, not for a section, so it
   must not draw more attention than the thing it replaced. */

.rebill-mem-gate-notice {
	padding: var(--rm-space-3) var(--rm-space-4);
	border: 1px dashed var(--rm-line-strong);
	border-radius: var(--rm-radius-sm);
	color: var(--rm-secondary);
	font-size: var(--rm-text-support);
}

.rebill-mem-gate-notice > :first-child {
	margin-top: 0;
}

.rebill-mem-gate-notice > :last-child {
	margin-bottom: 0;
}