/* BoostMyBiz360 Portal — uses the existing site design tokens. */

.bmb360-wrap {
	--bmb-ink: #054864;
	--bmb-accent: #1185D5;
	--bmb-body: #4A5C68;
	--bmb-ground: #F5F9FC;
	--bmb-border: #E3EAF0;
	--bmb-green: #1F9D62;
	--bmb-err: #C0392B;
	--bmb-radius: 14px;
	--bmb-radius-btn: 8px;

	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 20px 72px;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--bmb-body);
	line-height: 1.6;
	box-sizing: border-box;
}

.bmb360-wrap *,
.bmb360-wrap *::before,
.bmb360-wrap *::after { box-sizing: border-box; }

.bmb360-wrap--narrow { max-width: 560px; }

.bmb360-h1 {
	font-size: 34px;
	line-height: 1.25;
	color: var(--bmb-ink);
	font-weight: 700;
	margin: 0 0 8px;
}

.bmb360-h2 {
	font-size: 22px;
	line-height: 1.3;
	color: var(--bmb-ink);
	font-weight: 600;
	margin: 32px 0 18px;
}

.bmb360-head { margin-bottom: 8px; }

.bmb360-meta {
	margin: 6px 0 0;
	font-size: 15px;
	color: var(--bmb-body);
}

.bmb360-dot { margin: 0 8px; color: #9db2c0; }

.bmb360-role {
	color: var(--bmb-ink);
	font-weight: 600;
}

.bmb360-muted { color: var(--bmb-body); }
.bmb360-small { font-size: 14px; }
.bmb360-mt { margin-top: 20px; }

.bmb360-link { color: var(--bmb-accent); text-decoration: none; }
.bmb360-link:hover { text-decoration: underline; }

/* Cards */

.bmb360-card {
	background: #fff;
	border: 1px solid var(--bmb-border);
	border-radius: var(--bmb-radius);
	box-shadow: 0 1px 2px rgba(5, 72, 100, .04), 0 8px 24px rgba(5, 72, 100, .05);
	padding: 28px;
}

.bmb360-card--form { padding: 32px; }

.bmb360-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.bmb360-card--service {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.bmb360-card--service .bmb360-card__actions { margin-top: auto; }

/* 1.16.0. A card may now carry two actions. They wrap rather than shrink,
   because a button that has been squeezed narrower than its label is not a
   smaller button, it is an unreadable one. */
.bmb360-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
}
.bmb360-card__actions .bmb360-btn { margin-top: 0; }

.bmb360-card--admin { border-color: #cfe3f2; background: #fbfdff; }

.bmb360-card__iconwrap {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--bmb-ground);
	color: var(--bmb-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.bmb360-card__icon { width: 24px; height: 24px; }

.bmb360-card__title {
	font-size: 18px;
	line-height: 1.35;
	color: var(--bmb-ink);
	font-weight: 600;
	margin: 0 0 8px;
}

.bmb360-card__desc {
	font-size: 15px;
	margin: 0 0 20px;
	color: var(--bmb-body);
}

/* Buttons */

.bmb360-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--bmb-radius-btn);
	font-weight: 600;
	font-size: 15px;
	padding: 12px 22px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
	font-family: inherit;
}

.bmb360-btn--primary { background: var(--bmb-accent); color: #fff; }
.bmb360-btn--primary:hover { background: #0d6fb4; color: #fff; }

.bmb360-btn--outline {
	background: #fff;
	color: var(--bmb-ink);
	border-color: var(--bmb-border);
}
.bmb360-btn--outline:hover { border-color: var(--bmb-accent); color: var(--bmb-accent); }

.bmb360-btn--small { padding: 8px 14px; font-size: 14px; }

/* Forms */

.bmb360-form { margin-top: 20px; }

.bmb360-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--bmb-ink);
	margin: 16px 0 6px;
}

.bmb360-input,
.bmb360-select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--bmb-border);
	border-radius: var(--bmb-radius-btn);
	font-size: 15px;
	font-family: inherit;
	color: var(--bmb-ink);
	background: #fff;
}

.bmb360-input:focus,
.bmb360-select:focus {
	outline: none;
	border-color: var(--bmb-accent);
	box-shadow: 0 0 0 3px rgba(17, 133, 213, .15);
}

.bmb360-select { width: auto; min-width: 150px; padding: 8px 12px; }

.bmb360-check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 22px;
	font-size: 14px;
}

.bmb360-check input { width: auto; }

.bmb360-form .bmb360-btn--primary { width: 100%; margin-top: 8px; }

.bmb360-grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

.bmb360-inline {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.bmb360-inline .bmb360-btn--primary { width: auto; margin-top: 0; }

/* Notices */

.bmb360-notice {
	border-radius: var(--bmb-radius-btn);
	padding: 12px 16px;
	font-size: 15px;
	margin: 18px 0;
	border: 1px solid transparent;
}

.bmb360-notice--err { background: #fdf2f2; border-color: #f5cfcf; color: #8a2a2a; }
.bmb360-notice--ok { background: #f1faf5; border-color: #c7e9d7; color: #14683f; }
.bmb360-notice--warn { background: #fff8ec; border-color: #f3ddb4; color: #7a5312; }

/* Table */

.bmb360-tablewrap {
	overflow-x: auto;
	border: 1px solid var(--bmb-border);
	border-radius: var(--bmb-radius);
	background: #fff;
	margin-top: 22px;
}

.bmb360-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	min-width: 760px;
}

.bmb360-table th,
.bmb360-table td {
	text-align: left;
	padding: 14px 18px;
	border-bottom: 1px solid var(--bmb-border);
	vertical-align: middle;
}

.bmb360-table th {
	background: var(--bmb-ground);
	color: var(--bmb-ink);
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}

.bmb360-table tr:last-child td { border-bottom: none; }

.bmb360-badge {
	display: inline-block;
	background: var(--bmb-ground);
	color: var(--bmb-ink);
	border: 1px solid #cfe3f2;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	padding: 2px 10px;
	margin-left: 8px;
	white-space: nowrap;
}

/* Responsive */

@media (max-width: 1024px) {
	.bmb360-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
	.bmb360-wrap { padding: 40px 18px 56px; }
	.bmb360-h1 { font-size: 28px; }
	.bmb360-cards { grid-template-columns: 1fr; }
	.bmb360-grid2 { grid-template-columns: 1fr; }

	.bmb360-tablewrap { border: none; background: transparent; }
	.bmb360-table { min-width: 0; }
	.bmb360-table thead { display: none; }
	.bmb360-table tr {
		display: block;
		background: #fff;
		border: 1px solid var(--bmb-border);
		border-radius: var(--bmb-radius);
		margin-bottom: 14px;
		padding: 6px 4px;
	}
	.bmb360-table td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		border-bottom: 1px solid var(--bmb-ground);
		padding: 10px 14px;
	}
	.bmb360-table td:last-child { border-bottom: none; }
	.bmb360-table td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--bmb-ink);
		font-size: 13px;
		flex: 0 0 auto;
	}
}

/* ------------------------------------------------------------------ */
/* Theme reset: Astra underlines every <a>, which reaches our buttons. */
/* ------------------------------------------------------------------ */

.bmb360-wrap a { text-decoration: none; }
.bmb360-wrap a:hover { text-decoration: none; }
.bmb360-link:hover { text-decoration: underline; }
.bmb360-btn,
.bmb360-btn:hover,
.bmb360-btn:focus { text-decoration: none; }

/* ------------------------------------------------------------------ */
/* Financial Assistance                                               */
/* ------------------------------------------------------------------ */

.bmb360-fa-top {
	display: grid;
	grid-template-columns: 1.5fr 1fr; /* ~60 / 40 */
	gap: 40px;
	align-items: start;
}

.bmb360-fa-info { padding-top: 4px; }

.bmb360-fa-lede {
	font-size: 17px;
	line-height: 1.65;
	margin: 0 0 22px;
	color: var(--bmb-body);
}

.bmb360-fa-points {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
}

.bmb360-fa-points li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	font-size: 15px;
	color: var(--bmb-body);
}

.bmb360-fa-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bmb-green);
}

.bmb360-fa-disclaimer {
	font-size: 13px;
	line-height: 1.6;
	color: #6b7f8c;
	background: var(--bmb-ground);
	border-left: 3px solid var(--bmb-border);
	border-radius: 0 8px 8px 0;
	padding: 14px 16px;
	margin: 0;
}

.bmb360-h2--flush { margin-top: 0; }

.bmb360-textarea {
	min-height: 110px;
	resize: vertical;
	font-family: inherit;
	line-height: 1.55;
}

.bmb360-fa-form select.bmb360-input { width: 100%; }

/* Success confirmation */

.bmb360-success { padding: 18px 20px; }
.bmb360-success p { margin: 0; }
.bmb360-success__title { font-weight: 600; }
.bmb360-success__id { margin-top: 6px !important; font-size: 16px; }
.bmb360-success__id strong { letter-spacing: .02em; }
.bmb360-success__note { margin-top: 6px !important; opacity: .85; }

/* Requests */

.bmb360-fa-requests { margin-top: 44px; }

.bmb360-empty { text-align: center; padding: 36px 24px; }

.bmb360-leadid {
	font-weight: 600;
	color: var(--bmb-ink);
	white-space: nowrap;
}

.bmb360-table--leads { min-width: 1180px; }

/* Status badges — defined once, driven by the status registry. */

.bmb360-status {
	display: inline-block;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 12px;
	white-space: nowrap;
	border: 1px solid transparent;
}

.bmb360-status--info {
	background: #eaf4fc;
	color: #0b5f96;
	border-color: #cfe3f2;
}

.bmb360-status--muted {
	background: #f1f4f6;
	color: #61727e;
	border-color: #e0e6ea;
}

.bmb360-status--ok {
	background: #f1faf5;
	color: #14683f;
	border-color: #c7e9d7;
}

.bmb360-status--warn {
	background: #fff8ec;
	color: #7a5312;
	border-color: #f3ddb4;
}

@media (max-width: 1024px) {
	.bmb360-fa-top { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 782px) {
	.bmb360-fa-requests { margin-top: 32px; }
	.bmb360-fa-lede { font-size: 16px; }

	/* Each lead becomes a card; Lead ID, Status and Action stay prominent.
	   The desktop min-width is declared later in the sheet than the generic
	   .bmb360-table reset, so it has to be undone by name here. */
	.bmb360-table--leads { min-width: 0; }
	.bmb360-table--leads tr { padding: 10px 6px; }
	.bmb360-table--leads td:first-child {
		background: var(--bmb-ground);
		border-radius: 8px;
		margin-bottom: 4px;
	}
	.bmb360-table--leads td:first-child .bmb360-leadid { font-size: 15px; }
	.bmb360-table--leads td:last-child { padding-top: 14px; }
	/* The cell is a flex row with the "Action" label on the left, so the
	   button keeps its own width and sits opposite the label like every
	   other value in the card. */
	.bmb360-table--leads td:last-child .bmb360-btn { padding: 10px 18px; }
}

/* ------------------------------------------------------------------ */
/* Required markers, hints and per-field validation messages          */
/* ------------------------------------------------------------------ */

.bmb360-req {
	color: var(--bmb-err);
	margin-left: 3px;
	font-weight: 700;
}

.bmb360-formnote {
	margin: 6px 0 0;
	font-size: 13.5px;
	color: var(--bmb-body);
}

.bmb360-hint {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--bmb-body);
	opacity: .85;
}

.bmb360-fielderr {
	margin: 6px 0 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--bmb-err);
	display: flex;
	gap: 6px;
	align-items: flex-start;
}

.bmb360-fielderr::before {
	content: "!";
	flex: 0 0 16px;
	height: 16px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--bmb-err);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.bmb360-input--err,
.bmb360-input--err:hover {
	border-color: var(--bmb-err);
	background: #fffafa;
}

.bmb360-input--err:focus {
	border-color: var(--bmb-err);
	box-shadow: 0 0 0 3px rgba(192, 57, 43, .15);
}

/* Amounts line up when they are read down a column. */
.bmb360-amount {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Registration journey (Phase 3A.2)
   ------------------------------------------------------------------ */

/* The "Create Account" call to action on the sign-in screen. Deliberately a
   button rather than a sentence with a link in it: a new visitor arriving at
   a login form should be able to see the way out of it at a glance. */
.bmb360-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bmb360-btn--secondary {
	background: transparent;
	color: var(--bmb-accent);
	border: 1px solid var(--bmb-accent);
}
.bmb360-btn--secondary:hover { background: var(--bmb-accent); color: #fff; }

/* "Use a different mobile number" and "Resend" are escape hatches, not the
   thing we are asking people to do, so they read as quieter. */
.bmb360-form .bmb360-btn--link {
	width: auto;
	margin-top: 0;
	padding: 0;
	background: none;
	border: none;
	color: var(--bmb-muted, #667);
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}
.bmb360-form .bmb360-btn--link:hover { color: var(--bmb-accent); }

/* The resend block sits under the verify form and must not look like a
   second primary action competing with it. */
.bmb360-form + .bmb360-form { border-top: 1px solid var(--bmb-line, #e6e9ee); padding-top: 18px; }
.bmb360-form + .bmb360-form .bmb360-btn { width: auto; }

/* ---------------------------------------------------------------------
   Select fields (1.15.1)

   THE DEFECT THIS FIXES
   The registration Country field showed "India" with the bottom of the
   text sliced off. Measured, the cause was arithmetic rather than mystery:
   the portal gives every field 12px of vertical padding and a 1px border,
   and themes — Astra among them — put a fixed height on `select`. With
   box-sizing: border-box, a 40px theme height minus 24px of padding and 2px
   of border leaves a 14px content box for a 15px font. One pixel short, and
   the descender goes.

   None of the three parties is wrong on its own, which is why this needed
   measuring rather than guessing. The fix removes the conflict instead of
   trimming the padding:

     height: auto + min-height   the theme's fixed height stops deciding,
                                 and the field still lines up with the text
                                 inputs beside it
     line-height                 stated, not inherited from the wrap's 1.6
     appearance: none            native select metrics stop competing with
                                 our padding, which is the other half of it
     a drawn chevron             because appearance:none removes the arrow,
                                 and an inline SVG needs no extra request

   Scoped to .bmb360-wrap so nothing outside the portal is touched.
   ------------------------------------------------------------------ */

/* The text inputs get the same floor. A theme that crushes `select` almost
   always crushes `input` with it, and fixing only the one the defect was
   reported against would leave the field beside it a pixel from the same
   fault — and looking mismatched in the meantime. min-height is deliberate:
   it survives a theme's `height` even when that height carries !important,
   without this stylesheet having to shout back. */
.bmb360-wrap input.bmb360-input {
	height: auto;
	min-height: 48px;
	line-height: 1.4;
}

.bmb360-wrap select.bmb360-input,
.bmb360-wrap select.bmb360-select {
	height: auto;
	min-height: 48px;
	line-height: 1.4;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%234A5C68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	text-overflow: ellipsis;
}

/* The arrow is decoration; on a very narrow screen the name matters more. */
@media (max-width: 480px) {
	.bmb360-wrap select.bmb360-input,
	.bmb360-wrap select.bmb360-select { padding-right: 34px; background-position: right 10px center; }
}

/* Windows high-contrast and forced-colors modes drop background images, so
   the drawn chevron disappears. Give the native arrow back rather than
   leaving a field with no affordance at all. */
@media (forced-colors: active) {
	.bmb360-wrap select.bmb360-input,
	.bmb360-wrap select.bmb360-select { appearance: auto; background-image: none; padding-right: 14px; }
}

/* ---------------------------------------------------------------------
   Dashboard service cards (1.15.1)

   Lead Finder has to read as the thing you can use, without making the
   four Coming Soon cards look broken or like errors. The difference is
   carried by a badge and a slightly quieter surface — not by greying the
   text out, which would say "disabled" when the truth is "not yet".
   ------------------------------------------------------------------ */

.bmb360-lede {
	font-size: 16px;
	color: var(--bmb-body);
	margin: 0 0 4px;
	max-width: 60ch;
}

.bmb360-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin-bottom: 4px;
}

.bmb360-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
	line-height: 1.5;
}

.bmb360-badge--active {
	color: #14724A;
	background: #E6F6EE;
	border: 1px solid #BDE7D2;
}

.bmb360-badge--soon {
	color: #6B7A86;
	background: var(--bmb-ground);
	border: 1px solid var(--bmb-border);
}

/* The live card earns a little more presence than the rest. */
.bmb360-card--service.is-active { border-color: #BDE7D2; }

/* A Coming Soon card is intentionally flat: no shadow, no hover, no
   pointer. Nothing about it should suggest it can be pressed. */
.bmb360-card--service.is-soon {
	background: #FBFDFE;
	box-shadow: none;
}
.bmb360-card--service.is-soon:hover { transform: none; box-shadow: none; }
.bmb360-card--service.is-soon .bmb360-card__iconwrap { opacity: .62; }

/* The balance line under Lead Finder. */
.bmb360-card__meta {
	font-size: 14px;
	color: var(--bmb-body);
	margin: 0 0 14px;
}
.bmb360-card__meta strong {
	color: var(--bmb-ink);
	font-size: 18px;
	font-weight: 700;
}

/* Without a button, a flex card has nothing to push to the bottom, so the
   description would stretch instead. This keeps all the cards in a row the
   same shape whether or not they have a call to action. */
.bmb360-card--service.is-soon .bmb360-card__desc { margin-bottom: 0; }
.bmb360-card--service .bmb360-card__desc { margin-bottom: auto; }

/* =====================================================================
   1.16.0 — Buy Lead Credits
   ===================================================================== */

.bmb360-btn--ghost {
	background: transparent;
	color: var(--bmb-accent);
	border-color: transparent;
	padding-left: 14px;
	padding-right: 14px;
}
.bmb360-btn--ghost:hover { background: var(--bmb-ground); color: var(--bmb-accent); }

/* The purchase action that cannot yet purchase. It is deliberately NOT a
   button element and carries aria-disabled, so nothing announces it as a
   control that would work if only you were permitted to press it. */
.bmb360-btn--disabled {
	background: var(--bmb-ground);
	color: #6B7A86;
	border-color: var(--bmb-border);
	cursor: default;
	width: 100%;
}
.bmb360-btn--disabled:hover { background: var(--bmb-ground); color: #6B7A86; }

.bmb360-meta--terms { font-weight: 500; color: #4A5A66; }

.bmb360-cards--packs { align-items: stretch; }

.bmb360-card--pack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
}

.bmb360-card--pack .bmb360-card__title { margin-bottom: 6px; }

/* The popular pack is marked, not enlarged: scaling one card up makes the
   grid rows disagree about their height at every breakpoint. */
.bmb360-card--pack.is-popular { border-color: var(--bmb-accent); }

.bmb360-badge--popular {
	position: absolute;
	top: -11px;
	left: 24px;
	color: #fff;
	background: var(--bmb-accent);
	border: 1px solid var(--bmb-accent);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.bmb360-pack__credits {
	margin: 0 0 14px;
	color: #4A5A66;
	font-size: 15px;
}
.bmb360-pack__credits strong { color: var(--bmb-ink); font-size: 17px; }

.bmb360-pack__price {
	margin: 0 0 20px;
	font-size: 34px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--bmb-ink);
	/* A price must never be clipped and must not wrap mid-number.
	   The floor is expressed in em, not px: a fixed 40px sat BELOW the
	   natural height of a 34px line and so floored nothing while quietly
	   making the box overflow its own content. Relative to the font size it
	   stays above the glyph box at any fallback font, which is what makes it
	   a floor rather than a ceiling. */
	min-height: 1.35em;
	white-space: nowrap;
}

.bmb360-card--pack .bmb360-btn--disabled { margin-top: auto; }

@media (max-width: 860px) {
	.bmb360-cards--packs { grid-template-columns: 1fr; }
	.bmb360-badge--popular { left: 20px; }
}

/* =====================================================================
   1.17.0 — purchase journey
   ===================================================================== */

/* Said on every screen where a customer might wonder whether their card is
   about to be charged. Deliberately loud. */
.bmb360-testmode {
	display: inline-block;
	margin: 0 0 18px;
	padding: 8px 14px;
	border-radius: var(--bmb-radius-btn);
	background: #FFF4D6;
	border: 1px solid #E8C860;
	color: #6B4E00;
	font-size: 14px;
}

.bmb360-card--summary {
	max-width: 460px;
	margin-bottom: 22px;
}

.bmb360-card--pack .bmb360-pack__action { margin-top: auto; width: 100%; }

.bmb360-checkout { margin: 8px 0 0; }
.bmb360-checkout__status { margin: 12px 0 0; min-height: 1.4em; }
.bmb360-btn[aria-busy="true"] { opacity: .65; cursor: progress; }

.bmb360-result__line { margin: 0 0 6px; font-size: 16px; }
.bmb360-result__new { color: #14724A; font-size: 20px; }

/* Status pills in the history table. Colour is never the only signal — the
   label says the state in words too. */
.bmb360-pill {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .01em;
	border: 1px solid var(--bmb-border);
	background: var(--bmb-ground);
	color: #4A5A66;
	white-space: nowrap;
}
.bmb360-pill--credit_granted { color: #14724A; background: #E6F6EE; border-color: #BDE7D2; }
.bmb360-pill--paid_verified  { color: #14724A; background: #E6F6EE; border-color: #BDE7D2; }
.bmb360-pill--failed         { color: #8A2B2B; background: #FBEAEA; border-color: #EFC4C4; }
.bmb360-pill--cancelled      { color: #8A2B2B; background: #FBEAEA; border-color: #EFC4C4; }

.bmb360-tablewrap { overflow-x: auto; }

.bmb360-table--purchases { width: 100%; border-collapse: collapse; }
.bmb360-table--purchases th,
.bmb360-table--purchases td {
	padding: 13px 14px;
	border-bottom: 1px solid var(--bmb-border);
	text-align: left;
	vertical-align: middle;
}
.bmb360-table--purchases th {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6B7A86;
}
.bmb360-table--purchases code { font-size: 13px; color: #4A5A66; }

@media (max-width: 860px) {
	.bmb360-table--purchases th,
	.bmb360-table--purchases td { padding: 11px 10px; font-size: 14px; }
	.bmb360-card--summary { max-width: none; }
}

/* =====================================================================
   1.17.0 — coupons, partner programme
   ===================================================================== */

.bmb360-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.bmb360-coupon__error { margin: 10px 0 0; }

/* The order summary. Right-aligned figures so the eye can compare them,
   and the total separated by a rule rather than only by weight. */
.bmb360-summary { width: 100%; border-collapse: collapse; margin: 4px 0 10px; }
.bmb360-summary th,
.bmb360-summary td { padding: 7px 0; text-align: left; font-weight: 400; font-size: 15px; }
.bmb360-summary td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bmb360-summary__discount th,
.bmb360-summary__discount td { color: #14724A; }
.bmb360-summary__total th,
.bmb360-summary__total td {
	border-top: 1px solid var(--bmb-border);
	padding-top: 11px;
	font-weight: 700;
	font-size: 19px;
	color: var(--bmb-ink);
}

.bmb360-saving {
	margin: 0 0 6px;
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: #E6F6EE;
	border: 1px solid #BDE7D2;
	color: #14724A;
	font-size: 14px;
	font-weight: 600;
}

.bmb360-codelist { list-style: none; margin: 0 0 22px; padding: 0; }
.bmb360-codelist li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	padding: 11px 0;
	border-bottom: 1px solid var(--bmb-border);
}
.bmb360-codelist code { font-size: 16px; font-weight: 700; color: var(--bmb-ink); }

.bmb360-card--totals { margin-bottom: 18px; }
.bmb360-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.bmb360-total { display: flex; flex-direction: column; gap: 3px; }
.bmb360-total__label { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #6B7A86; }
.bmb360-total__value { font-size: 21px; color: var(--bmb-ink); font-variant-numeric: tabular-nums; }
.bmb360-total__count { font-size: 13px; color: #6B7A86; }

.bmb360-pill--pending  { color: #7A5A00; background: #FFF4D6; border-color: #E8C860; }
.bmb360-pill--approved { color: #14538A; background: #E6F0FA; border-color: #BBD6EF; }
.bmb360-pill--paid     { color: #14724A; background: #E6F6EE; border-color: #BDE7D2; }
.bmb360-pill--active   { color: #14724A; background: #E6F6EE; border-color: #BDE7D2; }
.bmb360-pill--suspended,
.bmb360-pill--inactive { color: #8A2B2B; background: #FBEAEA; border-color: #EFC4C4; }

@media (max-width: 860px) {
	.bmb360-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bmb360-actions .bmb360-btn { flex: 1 1 auto; }
}

/* The confirmation form's processing line. Takes no space until it says
   something, so the form does not shift when it appears. */
.bmb360-confirm__status { margin: 8px 0 0; }
.bmb360-confirm__status:empty { display: none; margin: 0; }