/**
 * CPR Subscriptions — front-end styles.
 *
 * Everything leans on the --mc-* design tokens declared by the core CPR
 * stylesheet on .mc-app, so light/dark mode, accent color and radii follow
 * the host plugin automatically. Fallback values keep the UI presentable if
 * a token is ever missing.
 */

/* ------------------------------------------------------------------
 * Sign-in card call to action
 * ------------------------------------------------------------------ */

.mcs-cta {
	margin-top: 18px;
	text-align: center;
}

.mcs-cta__rule {
	height: 1px;
	margin: 0 0 16px;
	background: var(--mc-line, #e4e7ec);
}

.mcs-cta__btn {
	width: 100%;
	justify-content: center;
	border: 1px solid var(--mc-accent, #4f46e5);
	color: var(--mc-accent, #4f46e5);
	background: transparent;
	font-weight: 600;
}

.mcs-cta__btn:hover {
	background: var(--mc-info-bg, #eef0fe);
}

/* ------------------------------------------------------------------
 * Modal
 * ------------------------------------------------------------------ */

.mcs-noscroll {
	overflow: hidden;
}

.mcs-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 4vh 16px;
	background: rgba(10, 12, 18, 0.55);
	backdrop-filter: blur(2px);
	overflow-y: auto;
}

.mcs-modal {
	position: relative;
	width: 100%;
	max-width: 760px;
	margin: auto 0;
	background: var(--mc-bg, #fff);
	color: var(--mc-ink, #14161a);
	border: 1px solid var(--mc-line, #e4e7ec);
	border-radius: var(--mc-radius, 12px);
	box-shadow: 0 24px 64px rgba(10, 12, 18, 0.28);
}

.mcs-modal__body {
	padding: 28px;
}

.mcs-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--mc-ink-2, #5b616e);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.mcs-modal__close:hover {
	background: var(--mc-surface-2, #f1f3f7);
	color: var(--mc-ink, #14161a);
}

.mcs-title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.mcs-title--center {
	text-align: center;
}

.mcs-sub {
	margin: 0 0 18px;
	color: var(--mc-ink-2, #5b616e);
	font-size: 14px;
}

.mcs-sub--center {
	text-align: center;
}

.mcs-foot {
	margin: 16px 0 0;
	text-align: center;
	color: var(--mc-ink-3, #8b909c);
	font-size: 13px;
}

.mcs-loading {
	padding: 32px 0;
	text-align: center;
	color: var(--mc-ink-3, #8b909c);
}

.mcs-alert {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: var(--mc-radius-sm, 8px);
	background: var(--mc-bad-bg, #fdecec);
	color: var(--mc-bad-fg, #a32626);
	font-size: 14px;
}

.mcs-back {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mc-ink-2, #5b616e);
	font-size: 13px;
	cursor: pointer;
}

.mcs-back:hover {
	color: var(--mc-accent, #4f46e5);
}

/* ------------------------------------------------------------------
 * Plan grid
 * ------------------------------------------------------------------ */

.mcs-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
	margin-top: 8px;
}

.mcs-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 18px;
	border: 1px solid var(--mc-line, #e4e7ec);
	border-radius: var(--mc-radius, 12px);
	background: var(--mc-surface, #f8f9fb);
}

.mcs-plan--featured {
	border-color: var(--mc-accent, #4f46e5);
	box-shadow: 0 0 0 1px var(--mc-accent, #4f46e5);
}

.mcs-plan__flag {
	position: absolute;
	top: -10px;
	left: 14px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--mc-accent, #4f46e5);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
}

.mcs-plan__name {
	margin: 4px 0 8px;
	font-size: 16px;
	font-weight: 700;
}

.mcs-plan__amount {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.mcs-plan__billing {
	margin-top: 2px;
	color: var(--mc-ink-2, #5b616e);
	font-size: 13px;
}

.mcs-plan__note {
	margin-top: 8px;
	display: inline-block;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--mc-ok-bg, #e9f7ef);
	color: var(--mc-ok-fg, #0f6b46);
	font-size: 12px;
	align-self: flex-start;
}

.mcs-plan__desc {
	margin: 10px 0 0;
	color: var(--mc-ink-2, #5b616e);
	font-size: 13px;
}

.mcs-plan__list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
}

.mcs-plan__feature {
	position: relative;
	margin: 0 0 6px;
	padding-left: 20px;
}

.mcs-plan__feature::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--mc-accent, #4f46e5);
	font-weight: 700;
}

.mcs-plan__list--limits .mcs-plan__feature::before {
	content: "\2022";
	color: var(--mc-ink-3, #8b909c);
}

.mcs-plan__limitshead {
	margin-top: 12px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mc-ink-3, #8b909c);
}

.mcs-plan > :nth-last-child(2) {
	margin-bottom: 16px;
}

.mcs-plan__btn {
	margin-top: auto;
	width: 100%;
	justify-content: center;
}

/* ------------------------------------------------------------------
 * Checkout form
 * ------------------------------------------------------------------ */

.mcs-chosen {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: var(--mc-radius-sm, 8px);
	background: var(--mc-surface-2, #f1f3f7);
	font-size: 14px;
}

.mcs-form {
	display: flex;
	flex-direction: column;
}

.mcs-label {
	margin: 12px 0 6px;
	font-size: 13px;
	font-weight: 600;
}

.mcs-input {
	padding: 10px 12px;
	border: 1px solid var(--mc-line-2, #d3d7df);
	border-radius: var(--mc-radius-sm, 8px);
	background: var(--mc-bg, #fff);
	color: var(--mc-ink, #14161a);
	font-size: 14px;
}

.mcs-input:focus {
	outline: 2px solid var(--mc-accent, #4f46e5);
	outline-offset: -1px;
	border-color: transparent;
}

.mcs-hint {
	margin: 6px 0 0;
	color: var(--mc-ink-3, #8b909c);
	font-size: 12px;
}

.mcs-gwrow {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.mcs-gw {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid var(--mc-line-2, #d3d7df);
	border-radius: var(--mc-radius-sm, 8px);
	background: var(--mc-surface, #f8f9fb);
	color: var(--mc-ink, #14161a);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.mcs-gw.is-active {
	border-color: var(--mc-accent, #4f46e5);
	background: var(--mc-info-bg, #eef0fe);
	color: var(--mc-info-fg, #3b34a3);
}

.mcs-continue {
	margin-top: 18px;
	justify-content: center;
}

.mcs-payarea {
	margin-top: 18px;
}

.mcs-stripe {
	margin-bottom: 14px;
}

.mcs-paybtn {
	width: 100%;
	justify-content: center;
}

.mcs-paypal {
	max-width: 420px;
	margin: 0 auto;
}

/* ------------------------------------------------------------------
 * Success
 * ------------------------------------------------------------------ */

.mcs-success__mark {
	width: 56px;
	height: 56px;
	margin: 10px auto 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--mc-ok-bg, #e9f7ef);
	color: var(--mc-ok-fg, #0f6b46);
	font-size: 28px;
	font-weight: 800;
}

.mcs-successbtn {
	display: block;
	margin: 8px auto 0;
}

/* ------------------------------------------------------------------
 * Portal tab
 * ------------------------------------------------------------------ */

.mcs-view .mcs-title {
	margin-bottom: 14px;
}

/* Same white as the page behind it, distinguished by its border alone --
   matching the same change made to the Carrier Payout Rates screen. */
.mcs-subcard {
	margin: 0 0 16px;
	padding: 20px;
	border: 1px solid var(--mc-line, #e4e7ec);
	border-radius: var(--mc-radius, 12px);
	background: var(--mc-bg, #fff);
}

.mcs-subcard__head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.mcs-subcard__name {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}

.mcs-subcard__price {
	margin-top: 4px;
	color: var(--mc-ink-2, #5b616e);
	font-size: 13px;
}

.mcs-badge {
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: var(--mc-surface-2, #f1f3f7);
	color: var(--mc-ink-2, #5b616e);
}

.mcs-badge--active,
.mcs-badge--trial {
	background: var(--mc-ok-bg, #e9f7ef);
	color: var(--mc-ok-fg, #0f6b46);
}

.mcs-badge--past_due,
.mcs-badge--on_hold,
.mcs-badge--pending {
	background: var(--mc-warn-bg, #fdf3e2);
	color: var(--mc-warn-fg, #8a5a08);
}

.mcs-badge--canceled,
.mcs-badge--expired,
.mcs-badge--refunded,
.mcs-badge--failed {
	background: var(--mc-bad-bg, #fdecec);
	color: var(--mc-bad-fg, #a32626);
}

.mcs-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-top: 14px;
}

.mcs-fact__l {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--mc-ink-3, #8b909c);
}

.mcs-fact__v {
	margin-top: 2px;
	font-size: 14px;
}

.mcs-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 14px;
	cursor: pointer;
}

.mcs-toggle input {
	accent-color: var(--mc-accent, #4f46e5);
	width: 18px;
	height: 18px;
}

.mcs-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.mcs-danger {
	color: var(--mc-bad-fg, #a32626);
	border-color: var(--mc-bad-fg, #a32626);
}

.mcs-danger:hover {
	background: var(--mc-bad-bg, #fdecec);
}

.mcs-history {
	margin-top: 16px;
	border-top: 1px solid var(--mc-line, #e4e7ec);
	padding-top: 12px;
}

.mcs-history summary {
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: var(--mc-ink-2, #5b616e);
}

.mcs-table {
	width: 100%;
	margin-top: 10px;
	border-collapse: collapse;
	font-size: 13px;
}

.mcs-table td {
	padding: 8px 6px;
	border-bottom: 1px solid var(--mc-line, #e4e7ec);
	vertical-align: middle;
}

.mcs-table__amount {
	font-weight: 600;
	white-space: nowrap;
}

.mcs-receipt {
	color: var(--mc-accent, #4f46e5);
	text-decoration: none;
	font-weight: 600;
}

.mcs-receipt:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------
 * Small screens
 * ------------------------------------------------------------------ */

@media (max-width: 560px) {
	.mcs-modal__body {
		padding: 20px 16px;
	}

	.mcs-plans {
		grid-template-columns: 1fr;
	}

	.mcs-actions .mc-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* ------------------------------------------------------------------
 * CPR shell adjustments (only on pages where this plugin loads)
 * ------------------------------------------------------------------ */

/* CPR 1.23+ lays the header out itself: the mark and the identity block
   share one row, and the tab strip scrolls sideways on narrow screens.
   These rules only fill the gap for older CPR builds, where cprs.js lifts
   the identity block into the brand row — they must never force wrapping,
   which would break the swipe row. */
.mc-topbar__brand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: nowrap;
}

.mc-topbar__brand .mc-who {
	flex: 0 0 auto;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}

/* The tab strip owns its row and scrolls rather than wrapping. */
.mc-topbar__row .mc-tabs {
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: nowrap;
}

/* Inside the Subscriptions view, the CPR context line and the
   matching/AI disclaimer are about compensation runs, not billing —
   hide them so the tab reads clean. */
#mc-app[data-view="cprs"] .mc-context,
#mc-app[data-view="cprs"] .mc-ainote {
	display: none;
}

@media (max-width: 600px) {
	.mc-topbar__brand {
		gap: 10px;
	}

	/* Stays on the mark's row; CPR handles shrinking the greeting. */
	.mc-topbar__brand .mc-who {
		width: auto;
		min-width: 0;
	}
}

.mcs-info__mark {
	width: 52px;
	height: 52px;
	margin: 10px auto 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--mc-info-bg, #eef0fe);
	color: var(--mc-info-fg, #3b34a3);
	font-size: 26px;
	font-weight: 800;
	font-family: Georgia, "Times New Roman", serif;
}

/* ------------------------------------------------------------------
 * [cpr_subscription] button
 *
 * Self-contained so it looks right on any theme, and driven by the two
 * custom properties the shortcode prints inline.
 * ------------------------------------------------------------------ */

.cprs-btnwrap {
	margin: 16px 0;
}

.cprs-btnwrap--center {
	text-align: center;
}

.cprs-btnwrap--right {
	text-align: right;
}

.cprs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
	background: var(--cprs-btn-bg, #4f46e5);
	color: var(--cprs-btn-fg, #fff);
}

.cprs-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(15, 18, 30, 0.18);
	color: var(--cprs-btn-fg, #fff);
}

.cprs-btn:active {
	transform: none;
	box-shadow: none;
}

.cprs-btn:focus-visible {
	outline: 3px solid var(--cprs-btn-bg, #4f46e5);
	outline-offset: 2px;
}

/* Styles */

.cprs-btn--outline {
	background: transparent;
	border-color: var(--cprs-btn-bg, #4f46e5);
	color: var(--cprs-btn-bg, #4f46e5);
}

.cprs-btn--outline:hover {
	background: var(--cprs-btn-bg, #4f46e5);
	color: var(--cprs-btn-fg, #fff);
}

.cprs-btn--link {
	background: transparent;
	border-color: transparent;
	color: var(--cprs-btn-bg, #4f46e5);
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cprs-btn--link:hover {
	box-shadow: none;
	transform: none;
	color: var(--cprs-btn-bg, #4f46e5);
	opacity: 0.8;
}

/* Sizes */

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

.cprs-btn--medium {
	padding: 12px 24px;
	font-size: 16px;
}

.cprs-btn--large {
	padding: 16px 34px;
	font-size: 18px;
}

/* Corners */

.cprs-btn--r-sharp {
	border-radius: 0;
}

.cprs-btn--r-rounded {
	border-radius: 8px;
}

.cprs-btn--r-pill {
	border-radius: 999px;
}

.cprs-btn--full {
	display: flex;
	width: 100%;
}

.cprs-btn__icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

.cprs-btnnote {
	margin: 8px 0 0;
	font-size: 13px;
	opacity: 0.7;
}

.cprs-btnwrap--center .cprs-btnnote {
	text-align: center;
}

.cprs-btnwrap--right .cprs-btnnote {
	text-align: right;
}

.mcs-gwhint:empty {
	display: none;
}

.mcs-simnote {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-radius: var(--mc-radius-sm, 8px);
	background: var(--mc-warn-bg, #fdf3e2);
	color: var(--mc-warn-fg, #8a5a08);
	font-size: 13px;
	text-align: center;
}

/* ATH Móvil payment step ------------------------------------------- */

.mcs-gw {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}

.mcs-gw__icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.mcs-athm {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 22px 16px;
	border: 1px solid var(--mc-line, #e4e7ec);
	border-radius: var(--mc-radius, 12px);
	background: var(--mc-surface, #f8f9fb);
}

/* Evertec's SDK injects its own branded button here; give it room and
   center it without overriding their styling. */
.mcs-athm__slot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
}

.mcs-athm__slot > * {
	max-width: 100%;
}

.mcs-athm__status {
	margin: 0;
	color: var(--mc-ink-3, #8b909c);
	font-size: 13px;
	text-align: center;
}

.mcs-athm__status--bad {
	color: var(--mc-bad-fg, #a32626);
}

.mcs-athm__steps {
	margin: 12px 0 0;
	color: var(--mc-ink-2, #5b616e);
	font-size: 13px;
	text-align: center;
	line-height: 1.5;
}

/* Phone field shown only for ATH Móvil */

.mcs-phone[hidden] {
	display: none;
}

.mcs-phone {
	display: block;
	margin-top: 4px;
}

/* The ATH Móvil panel gets a soft brand-tinted frame so Evertec's own
   button reads as an intentional part of the checkout rather than a
   dropped-in widget. Their button keeps its official styling. */

.mcs-athm {
	position: relative;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent), var(--mc-surface, #f8f9fb);
}

.mcs-athm::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	border-radius: var(--mc-radius, 12px) var(--mc-radius, 12px) 0 0;
	background: linear-gradient(90deg, #f7941e, #ef4136);
}

.mcs-athm__slot {
	padding-top: 4px;
}

.mcs-athm__slot img,
.mcs-athm__slot button,
.mcs-athm__slot a {
	max-width: 100%;
	height: auto;
}

.mcs-field[hidden] {
	display: none;
}

.mcs-field {
	/* Match the form's own column so the label sits above a full-width
	   input, exactly like the fields around it. */
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.mcs-field .mcs-input {
	width: 100%;
	box-sizing: border-box;
}

.mcs-input--bad {
	border-color: var(--mc-bad-fg, #a32626);
	outline: 2px solid var(--mc-bad-bg, #fdecec);
	outline-offset: -1px;
}

/* ATH Móvil: our own branded button, live instantly ------------------ */

.mcs-gwathm {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
}

.mcs-athmbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 100%;
	min-height: 48px;
	padding: 12px 18px;
	border: 0;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.05s ease;
}

.mcs-athmbtn:hover {
	filter: brightness(1.05);
}

.mcs-athmbtn:active {
	transform: translateY(1px);
}

.mcs-athmbtn:disabled {
	opacity: 0.6;
	cursor: default;
}

.mcs-athmbtn__brand {
	font-weight: 800;
	font-style: italic;
}

/* Theme: default = ATH orange, dark = black, light = white */

.mcs-athmbtn--btn {
	background: #f7941e;
	color: #ffffff;
}

.mcs-athmbtn--btn-dark {
	background: #1a1a1a;
	color: #ffffff;
}

.mcs-athmbtn--btn-dark .mcs-athmbtn__brand {
	color: #f7941e;
}

.mcs-athmbtn--btn-light {
	background: #ffffff;
	color: #1a1a1a;
	box-shadow: inset 0 0 0 1.5px #e4e7ec;
}

.mcs-athmbtn--btn-light .mcs-athmbtn__brand {
	color: #f7941e;
}

/* Waiting-for-confirmation panel */

.mcs-athm.is-waiting {
	align-items: center;
	text-align: center;
}

.mcs-athmwait__spin {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid rgba(247, 148, 30, 0.25);
	border-top-color: #f7941e;
	animation: mcs-athmspin 0.9s linear infinite;
}

@keyframes mcs-athmspin {
	to { transform: rotate(360deg); }
}

.mcs-athmwait__title {
	margin: 12px 0 0;
	font-weight: 600;
	color: var(--mc-ink, #1c2430);
}

.mcs-athmwait__sub {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--mc-ink-2, #5b616e);
}

.mcs-athmwait__cancel {
	margin-top: 14px;
	background: none;
	border: 0;
	padding: 0;
	font-size: 13px;
	color: var(--mc-ink-3, #8b909c);
	text-decoration: underline;
	cursor: pointer;
}

.mcs-athmwait__cancel:hover {
	color: var(--mc-bad-fg, #a32626);
}

/* Call-to-action area that swaps with the selected payment method */

.mcs-cta {
	margin-top: 14px;
}

.mcs-cta[hidden] {
	display: none;
}

.mcs-cta .mc-btn,
.mcs-cta .mcs-athmbtn {
	width: 100%;
}

/* PayPal-flavored continue button */

.mcs-continue--pp {
	background: #0070ba;
	border-color: #0070ba;
}

.mcs-continue--pp:hover {
	background: #005c99;
	border-color: #005c99;
}

/* Mobile hardening ---------------------------------------------------- */

.mcs-alert {
	word-break: break-word;
	overflow-wrap: anywhere;
	line-height: 1.45;
}

/* The phone field must always stack label-over-input, whatever the
   surrounding theme injects. */

.mcs-field,
.mcs-field .mcs-label {
	display: block;
	width: 100%;
}

.mcs-field .mcs-label {
	margin-bottom: 6px;
}

.mcs-field .mcs-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 640px) {
	.mcs-alert {
		margin: 0 0 14px;
		padding: 12px 40px 12px 14px;
		font-size: 14px;
	}

	.mcs-gwrow {
		flex-wrap: wrap;
		gap: 8px;
	}

	.mcs-gwrow .mcs-gw {
		flex: 1 1 46%;
		min-height: 46px;
	}

	.mcs-cta .mc-btn,
	.mcs-cta .mcs-athmbtn {
		width: 100%;
		min-height: 54px;
		font-size: 16px;
		border-radius: 12px;
	}

	.mcs-athmbtn {
		padding: 14px 18px;
	}
}

/* A canceled subscription still inside its paid period ----------------- */

.mcs-badge--ending {
	background: #fdf3e2;
	color: #8a5a08;
}

.mcs-endnote {
	margin: 8px 0 0;
	padding: 10px 12px;
	border-radius: var(--mc-radius-sm, 8px);
	background: #fdf3e2;
	color: #8a5a08;
	font-size: 13px;
	line-height: 1.45;
}

/* Required-field marker and field rhythm ------------------------------ */

.mcs-req {
	margin-left: 3px;
	color: var(--mc-bad-fg, #c0392b);
	font-weight: 700;
}

.mcs-field + .mcs-field {
	margin-top: 14px;
}

.mcs-field .mcs-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.mcs-field .mcs-hint {
	margin: 6px 0 0;
}

/* Two across where there is room; stacked on phones. */

@media (min-width: 560px) {
	.mcs-form--names {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}

	.mcs-form--names .mcs-field + .mcs-field {
		margin-top: 0;
	}
}

/* Account details card ------------------------------------------------ */

.mcs-account .mcs-form {
	margin-top: 12px;
}

.mcs-subhead {
	margin: 28px 0 12px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.mcs-readonly {
	padding: 10px 14px;
	border: 1px solid var(--mc-line, #e4e7ec);
	border-radius: var(--mc-radius-sm, 8px);
	background: var(--mc-bg, #fff);
	color: var(--mc-ink-2, #5b616e);
	font-size: 14px;
	word-break: break-all;
}

.mcs-account__note {
	margin-top: 10px;
}

.mcs-account__note--bad {
	color: var(--mc-bad-fg, #c0392b);
}

.mcs-account__note--ok {
	color: var(--mc-good-fg, #1c7a4c);
}

/* Modal footer links + disclaimer -------------------------------------- */

.mcs-foot__link {
	color: var(--mcs-accent, #5346e8);
	text-decoration: underline;
	cursor: pointer;
}

.mcs-disclaimer {
	max-width: 56ch;
	margin: 0 auto 18px;
	text-align: left;
}

.mcs-disclaimer p {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mcs-ink-2, #5b616e);
	margin: 0 0 12px;
}

/* Contact us pill + modal ---------------------------------------------- */

.mcs-portalhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	/* Room between the header row and whatever follows it, so the button
	   is not crowding the section underneath. */
	margin-bottom: 22px;
}

.mcs-pill {
	appearance: none;
	border: 1px solid var(--mcs-accent, #5346e8);
	background: #fff;
	color: var(--mcs-accent, #5346e8);
	font-size: 13px;
	font-weight: 700;
	padding: 7px 16px;
	border-radius: 999px;
	cursor: pointer;
}

.mcs-pill:hover {
	background: var(--mcs-accent, #5346e8);
	color: #fff;
}

/* Messages tab: chat ---------------------------------------------------- */

.mcs-chat {
	border: 1px solid var(--mcs-line, #e4e7ec);
	border-radius: 14px;
	background: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: 100%;
}

.mcs-chat__scroll {
	height: 420px;
	max-height: 55vh;
	overflow-y: auto;
	padding: 18px 16px;
	background: var(--mcs-surface, #f8f9fb);
}

.mcs-chat__empty {
	text-align: center;
	color: var(--mcs-ink-3, #8b909c);
	font-size: 14px;
	margin-top: 40px;
}

.mcs-msg {
	display: flex;
	justify-content: flex-start;
	margin: 0 0 10px;
}

.mcs-msg--mine {
	justify-content: flex-end;
}

.mcs-msg__bubble {
	max-width: 78%;
	padding: 10px 14px;
	border-radius: 16px 16px 16px 4px;
	background: #fff;
	border: 1px solid var(--mcs-line, #e4e7ec);
}

.mcs-msg--mine .mcs-msg__bubble {
	background: var(--mcs-accent, #5346e8);
	border-color: var(--mcs-accent, #5346e8);
	color: #fff;
	border-radius: 16px 16px 4px 16px;
}

.mcs-msg__text {
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}

.mcs-msg__when {
	font-size: 11px;
	opacity: 0.7;
	margin-top: 4px;
}

.mcs-chat__composer {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	padding: 12px;
	border-top: 1px solid var(--mcs-line, #e4e7ec);
	background: #fff;
}

.mcs-chat__input {
	flex: 1;
	border: 1px solid #cfd3db;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	resize: none;
	min-height: 44px;
}

.mcs-chat__send {
	flex: 0 0 auto;
}

@media (max-width: 640px) {
	.mcs-chat__scroll {
		height: 50vh;
	}

	.mcs-msg__bubble {
		max-width: 88%;
	}

	.mcs-portalhead {
		gap: 8px;
		margin-bottom: 26px;
	}
}


/* Unread badge on the messages pill ------------------------------------ */

.mcs-pill--badged {
	position: relative;
}

.mcs-pill__badge {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #d63638;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}

/* Always light: pin the checkout, portal, chat and modals to light UI
   regardless of the OS/browser dark-mode preference (macOS and Windows
   both signal it the same way). */

.mcs-modal,
.mcs-chat,
.mcs-assign,
.mcs-plans,
.mcs-portalhead,
[class^="mcs-"],
[class*=" mcs-"] {
	color-scheme: light;
}

.mcs-modal,
.mcs-chat {
	background-color: #ffffff;
	color: #16181d;
}

.mcs-chat__input,
.mcs-modal input,
.mcs-modal select,
.mcs-modal textarea {
	color-scheme: light;
	background-color: #ffffff;
	color: #16181d;
}

/* Payment method on file ------------------------------------------------ */

.mcs-method {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 16px 0 4px;
	padding: 14px 16px;
	border: 1px solid var(--mcs-line, #e4e7ec);
	border-radius: 12px;
	background: #fff;
}

.mcs-method__left {
	display: flex;
	align-items: center;
	gap: 13px;
	min-width: 0;
}

.mcs-method__lines {
	min-width: 0;
}

.mcs-method__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--mcs-ink-3, #8b909c);
}

.mcs-method__value {
	font-size: 15px;
	font-weight: 600;
	color: var(--mcs-ink, #16181d);
	margin-top: 2px;
	word-break: break-word;
}

.mcs-method__note {
	font-size: 12.5px;
	color: var(--mcs-ink-2, #5b616e);
	margin-top: 3px;
}

.mcs-method__btn {
	appearance: none;
	flex: 0 0 auto;
	border: 1px solid var(--mcs-accent, #4f46e5);
	background: #fff;
	color: var(--mcs-accent, #4f46e5);
	font-size: 13px;
	font-weight: 700;
	padding: 8px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.mcs-method__btn:hover {
	background: var(--mcs-accent, #4f46e5);
	color: #fff;
}

.mcs-method__btn[disabled] {
	opacity: 0.55;
	cursor: default;
}

/* Brand chip */

.mcs-brand {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 32px;
	border-radius: 7px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.03em;
	color: #fff;
	background: #5b616e;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.mcs-brand.is-visa   { background: #1a1f71; }
.mcs-brand.is-mc     { background: #b4442a; }
.mcs-brand.is-amex   { background: #0077a6; }
.mcs-brand.is-disc   { background: #e06a1b; }
.mcs-brand.is-pp     { background: #003087; }
.mcs-brand.is-ath    { background: #f26722; }
.mcs-brand.is-bank   { background: #1c7a4c; }

@media (max-width: 560px) {
	.mcs-method {
		align-items: flex-start;
	}

	.mcs-method__btn {
		width: 100%;
		text-align: center;
	}
}

/* Switch payment provider ---------------------------------------------- */

.mcs-method__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.mcs-method__link {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	font-size: 13px;
	color: var(--mcs-ink-2, #5b616e);
	text-decoration: underline;
	cursor: pointer;
}

.mcs-method__link:hover {
	color: var(--mcs-accent, #4f46e5);
}

.mcs-switch {
	display: grid;
	gap: 10px;
	margin-top: 6px;
}

.mcs-switch__opt {
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	text-align: left;
	padding: 14px 16px;
	border: 1px solid var(--mcs-line, #e4e7ec);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mcs-switch__opt:hover {
	border-color: var(--mcs-accent, #4f46e5);
	box-shadow: 0 2px 10px rgba(79, 70, 229, 0.12);
}

.mcs-switch__name {
	font-size: 15px;
	font-weight: 700;
	color: var(--mcs-ink, #16181d);
}

.mcs-switch__blurb {
	font-size: 13px;
	color: var(--mcs-ink-2, #5b616e);
	margin-top: 3px;
}

.mcs-switch__warn {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	background: #fdf3e2;
	color: #8a5a08;
	white-space: nowrap;
}

@media (max-width: 560px) {
	.mcs-switch__opt {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Coupon check --------------------------------------------------------- */

.mcs-coupon {
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
}

.mcs-coupon__btn {
	appearance: none;
	border: 1px solid var(--mcs-accent, #4f46e5);
	background: #fff;
	color: var(--mcs-accent, #4f46e5);
	font-size: 13px;
	font-weight: 700;
	padding: 7px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.mcs-coupon__btn:hover:not([disabled]) {
	background: var(--mcs-accent, #4f46e5);
	color: #fff;
}

.mcs-coupon__btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.mcs-coupon__note {
	margin-top: 10px;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.5;
}

.mcs-coupon__note.is-ok {
	background: #e8f6ee;
	border: 1px solid #b7e0c8;
	color: #14663c;
}

.mcs-coupon__note.is-bad {
	background: #fdecec;
	border: 1px solid #f3c2c2;
	color: #8a2020;
}

/* Old price struck through, new price carrying the weight. */
.mcs-coupon__price {
	margin-top: 5px;
	font-size: 15px;
}

.mcs-coupon__price s {
	opacity: 0.65;
	margin-right: 6px;
}

.mcs-coupon__price b {
	font-size: 17px;
}

.mcs-coupon__price span {
	font-size: 13px;
	opacity: 0.85;
	margin-left: 6px;
}

.mcs-coupon__after {
	margin-top: 6px;
	font-size: 12.5px;
	opacity: 0.85;
}

/* Discount stated at the payment step ---------------------------------- */

.mcs-discount {
	margin: -6px 0 14px;
	font-size: 13.5px;
	color: #14663c;
	background: #e8f6ee;
	border: 1px solid #b7e0c8;
	border-radius: 8px;
	padding: 8px 12px;
}

.mcs-discount s {
	opacity: 0.7;
	margin-right: 6px;
}

.mcs-discount__detail {
	margin-top: 4px;
	font-size: 13px;
	opacity: 0.9;
}

.mcs-discount__code {
	margin-top: 5px;
	font-size: 12px;
	opacity: 0.75;
	letter-spacing: 0.02em;
}

/* Lifetime: settled, not winding down ----------------------------------- */

.mcs-badge--lifetime {
	background: #e8f6ee;
	color: #14663c;
	border: 1px solid #b7e0c8;
}

.mcs-lifenote {
	margin: 10px 0 0;
	padding: 10px 14px;
	border-radius: 10px;
	background: #e8f6ee;
	border: 1px solid #b7e0c8;
	color: #14663c;
	font-size: 13.5px;
	line-height: 1.5;
}

/* Who said it, above the message ---------------------------------------- */

.mcs-msg__who {
	font-size: 11.5px;
	font-weight: 700;
	opacity: 0.85;
	margin-bottom: 3px;
}