/**
 * Membership Pro — frontend injection styles for the manage page.
 *
 * Pro injects action buttons via filter; Free's membership-manage.css
 * already styles the container. This file only adds variants specific
 * to Pro (pause state, paused banner).
 */

.lrn-membership-banner--paused {
	background: var(--lrn-accent-bg);
	color: var(--lrn-accent);
	border-color: var(--lrn-accent);
}

.lrn-membership-banner--paused .lrn-btn {
	background: var(--lrn-accent);
	color: var(--lrn-white);
}

/* ── Gift-code redeem widget ([learnomy_gift_redeem]) ────────────── */

.lrn-gift-redeem {
	max-width: 28rem;
	margin-block: var(--lrn-sp-4);
	margin-inline: auto;
	padding: var(--lrn-sp-5);
	background: var(--lrn-bg);
	border: 1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-lg);
}

.lrn-gift-redeem__head {
	display: flex;
	align-items: center;
	gap: var(--lrn-sp-2);
	margin-bottom: var(--lrn-sp-3);
}

.lrn-gift-redeem__head svg {
	color: var(--lrn-accent);
	flex-shrink: 0;
}

.lrn-gift-redeem__title {
	margin: 0;
	font-size: var(--lrn-text-lg);
	font-weight: 600;
	color: var(--lrn-text);
}

.lrn-gift-redeem__intro {
	margin: 0 0 var(--lrn-sp-3);
	font-size: var(--lrn-text-sm);
	color: var(--lrn-text-secondary);
}

.lrn-gift-redeem__form label {
	display: block;
	font-size: var(--lrn-text-sm);
	font-weight: 600;
	color: var(--lrn-text);
	margin-bottom: var(--lrn-sp-2);
}

.lrn-gift-redeem__input {
	width: 100%;
	min-height: 40px;
	padding: var(--lrn-sp-2) var(--lrn-sp-3);
	border: 1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-md);
	font-family: inherit;
	font-size: var(--lrn-text-base);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--lrn-bg);
	color: var(--lrn-text);
}

.lrn-gift-redeem__input:focus-visible {
	outline: 2px solid var(--lrn-accent);
	outline-offset: 1px;
	border-color: var(--lrn-accent);
}

.lrn-gift-redeem__form .lrn-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--lrn-sp-2);
	min-height: 40px;
	margin-top: var(--lrn-sp-3);
	padding: 0 var(--lrn-sp-4);
	border: 0;
	border-radius: var(--lrn-radius-md);
	font-size: var(--lrn-text-sm);
	font-weight: 600;
	cursor: pointer;
}

.lrn-gift-redeem .lrn-btn--primary {
	background: var(--lrn-accent);
	color: var(--lrn-white);
}

.lrn-gift-redeem .lrn-btn--primary:hover {
	background: var(--lrn-accent-hover);
}

.lrn-gift-redeem .lrn-btn:focus-visible {
	outline: 2px solid var(--lrn-accent);
	outline-offset: 2px;
}

.lrn-gift-redeem .lrn-btn:disabled,
.lrn-gift-redeem .lrn-btn[aria-busy="true"] {
	opacity: 0.65;
	cursor: not-allowed;
}

.lrn-gift-redeem__login {
	text-decoration: none;
}

.lrn-gift-redeem .lrn-btn__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: lrn-gift-spin 0.6s linear infinite;
	flex-shrink: 0;
}

.lrn-gift-redeem .lrn-btn[aria-busy="true"] .lrn-btn__spinner {
	display: inline-block;
}

@keyframes lrn-gift-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.lrn-gift-redeem .lrn-btn__spinner {
		animation: none;
		border-style: dashed;
	}
}

.lrn-gift-redeem__error {
	display: none;
	margin-top: var(--lrn-sp-3);
	padding: var(--lrn-sp-2) var(--lrn-sp-3);
	background: var(--lrn-danger-bg);
	border: 1px solid var(--lrn-danger);
	border-radius: var(--lrn-radius-md);
	font-size: var(--lrn-text-sm);
	color: var(--lrn-danger);
}

.lrn-gift-redeem__error.is-visible {
	display: block;
}

.lrn-gift-redeem__success {
	display: none;
	margin-top: var(--lrn-sp-3);
	padding: var(--lrn-sp-2) var(--lrn-sp-3);
	background: var(--lrn-success-bg);
	border: 1px solid var(--lrn-success);
	border-radius: var(--lrn-radius-md);
	font-size: var(--lrn-text-sm);
	color: var(--lrn-success);
}

.lrn-gift-redeem__success.is-visible {
	display: block;
}

.lrn-gift-redeem__live {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.lrn-dark .lrn-gift-redeem {
	background: var(--lrn-bg);
	border-color: var(--lrn-border);
}

@media (max-width: 640px) {
	.lrn-gift-redeem {
		max-width: 100%;
		padding: var(--lrn-sp-4);
	}

	.lrn-gift-redeem__form .lrn-btn {
		width: 100%;
		min-height: 48px;
		justify-content: center;
	}
}

/* Buy-as-a-gift widget + the buyer's claim-code panel. */
.lrn-gift-purchase {
	max-width: 28rem;
	margin-block: var(--lrn-sp-4);
	margin-inline: auto;
	padding: var(--lrn-sp-5);
	background: var(--lrn-bg);
	border: 1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-lg);
}

.lrn-gift-purchase__head {
	display: flex;
	align-items: center;
	gap: var(--lrn-sp-2);
	margin-bottom: var(--lrn-sp-3);
}

.lrn-gift-purchase__head svg {
	color: var(--lrn-accent);
	flex-shrink: 0;
}

.lrn-gift-purchase__title {
	margin: 0;
	font-size: var(--lrn-text-lg);
	font-weight: 600;
	color: var(--lrn-text);
}

.lrn-gift-purchase__intro {
	margin: 0 0 var(--lrn-sp-3);
	font-size: var(--lrn-text-sm);
	color: var(--lrn-text-secondary);
}

.lrn-gift-purchase__field {
	margin-bottom: var(--lrn-sp-3);
}

.lrn-gift-purchase__field label {
	display: block;
	font-size: var(--lrn-text-sm);
	font-weight: 600;
	color: var(--lrn-text);
	margin-bottom: var(--lrn-sp-2);
}

.lrn-gift-purchase__plan,
.lrn-gift-purchase__qty,
.lrn-gift-purchase__gateway {
	width: 100%;
	min-height: 40px;
	padding: var(--lrn-sp-2) var(--lrn-sp-3);
	border: 1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-md);
	font-family: inherit;
	font-size: var(--lrn-text-base);
	background: var(--lrn-bg);
	color: var(--lrn-text);
}

.lrn-gift-purchase__plan:focus-visible,
.lrn-gift-purchase__qty:focus-visible,
.lrn-gift-purchase__gateway:focus-visible {
	outline: 2px solid var(--lrn-accent);
	outline-offset: 1px;
	border-color: var(--lrn-accent);
}

.lrn-gift-purchase__total {
	margin: var(--lrn-sp-3) 0 0;
	font-size: var(--lrn-text-base);
	color: var(--lrn-text);
}

.lrn-gift-purchase__total-value {
	font-weight: 700;
}

.lrn-gift-purchase__form .lrn-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--lrn-sp-2);
	min-height: 40px;
	margin-top: var(--lrn-sp-3);
	padding: 0 var(--lrn-sp-4);
	border: 0;
	border-radius: var(--lrn-radius-md);
	font-size: var(--lrn-text-sm);
	font-weight: 600;
	cursor: pointer;
}

.lrn-gift-purchase .lrn-btn--primary {
	background: var(--lrn-accent);
	color: var(--lrn-white);
}

.lrn-gift-purchase .lrn-btn--primary:hover {
	background: var(--lrn-accent-hover);
}

.lrn-gift-purchase .lrn-btn:focus-visible {
	outline: 2px solid var(--lrn-accent);
	outline-offset: 2px;
}

.lrn-gift-purchase .lrn-btn:disabled,
.lrn-gift-purchase .lrn-btn[aria-busy="true"] {
	opacity: 0.65;
	cursor: not-allowed;
}

.lrn-gift-purchase .lrn-btn__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: lrn-gift-spin 0.6s linear infinite;
	flex-shrink: 0;
}

.lrn-gift-purchase .lrn-btn[aria-busy="true"] .lrn-btn__spinner {
	display: inline-block;
}

.lrn-gift-purchase__error {
	display: none;
	margin-top: var(--lrn-sp-3);
	padding: var(--lrn-sp-2) var(--lrn-sp-3);
	background: var(--lrn-danger-bg);
	border: 1px solid var(--lrn-danger);
	border-radius: var(--lrn-radius-md);
	font-size: var(--lrn-text-sm);
	color: var(--lrn-danger);
}

.lrn-gift-purchase__error.is-visible {
	display: block;
}

.lrn-gift-purchase__live {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.lrn-gift-purchase__codes {
	margin-top: var(--lrn-sp-4);
	padding-top: var(--lrn-sp-4);
	border-top: 1px solid var(--lrn-border);
}

.lrn-gift-purchase__codes-title {
	margin: 0 0 var(--lrn-sp-2);
	font-size: var(--lrn-text-base);
	font-weight: 600;
	color: var(--lrn-text);
}

.lrn-gift-purchase__codes-intro {
	margin: 0 0 var(--lrn-sp-3);
	font-size: var(--lrn-text-sm);
	color: var(--lrn-text-secondary);
}

.lrn-gift-purchase__codes-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lrn-gift-purchase__code-row {
	display: flex;
	align-items: center;
	gap: var(--lrn-sp-2);
	flex-wrap: wrap;
	padding: var(--lrn-sp-2) 0;
	border-bottom: 1px solid var(--lrn-border);
}

.lrn-gift-purchase__code {
	font-family: var(--lrn-font-mono);
	font-size: var(--lrn-text-sm);
	letter-spacing: 0.05em;
	color: var(--lrn-text);
}

.lrn-gift-purchase__code-plan {
	flex: 1 1 auto;
	font-size: var(--lrn-text-sm);
	color: var(--lrn-text-secondary);
}

.lrn-badge {
	display: inline-block;
	padding: 2px var(--lrn-sp-2);
	border-radius: var(--lrn-radius-sm);
	font-size: var(--lrn-text-xs);
	font-weight: 600;
}

.lrn-badge--success {
	background: var(--lrn-success-bg);
	color: var(--lrn-success);
}

.lrn-badge--muted {
	background: var(--lrn-surface-2);
	color: var(--lrn-text-secondary);
}

.lrn-dark .lrn-gift-purchase {
	background: var(--lrn-bg);
	border-color: var(--lrn-border);
}

@media (max-width: 640px) {
	.lrn-gift-purchase {
		max-width: 100%;
		padding: var(--lrn-sp-4);
	}

	.lrn-gift-purchase__form .lrn-btn {
		width: 100%;
		min-height: 48px;
		justify-content: center;
	}
}

/* Grouped "Gift this membership" section on the pricing page — wraps the
   redeem ("I have a code") + buy-as-a-gift ("I want to give one") widgets
   under one heading so a self-buyer reads it as a single optional block. */
.lrn-gift-section {
	margin-block: var(--lrn-sp-8);
}
.lrn-gift-section__title {
	text-align: center;
	margin: 0 0 var(--lrn-sp-2);
	/* Explicit token so the heading stays readable regardless of the active
	   theme's default heading colour (some go low-contrast in dark mode). */
	color: var(--lrn-text);
	font-size: var(--lrn-text-2xl, 30px);
	font-weight: var(--lrn-weight-semibold, 600);
}
.lrn-gift-section__intro {
	text-align: center;
	color: var(--lrn-text-secondary);
	max-width: 36rem;
	margin: 0 auto var(--lrn-sp-5);
}
.lrn-gift-section__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
	gap: var(--lrn-sp-4);
	align-items: start;
	justify-items: center;
}
/* Inside the grouped section the cards fill their column and align at the top
   (their standalone centering margin is no longer needed). */
.lrn-gift-section .lrn-gift-redeem,
.lrn-gift-section .lrn-gift-purchase {
	margin-block: 0;
	width: 100%;
}

/* ---------------------------------------------------------------------------
   Change-plan modal (membership-pro-frontend.js).

   The base .lrn-modal class (learnomy.css) is a 560px dialog *widget* with no
   positioning; the full-viewport overlay layout is only defined scoped under
   .lrn-confirm-modal / .lrn-cancel-modal. So this modal owns its own overlay
   layout — mirroring the confirm-modal contract (transparent wrapper, dimming
   backdrop, centered dialog sheet) that fixed Basecamp #9925123520 — then adds
   the plan-picker, timing and live proration styles. Token-driven so dark mode
   + RTL inherit from the foundation.
   ------------------------------------------------------------------------- */
.lrn-pro-plan-modal {
	position:        fixed;
	inset:           0;
	/* No `width: 100vw` — `inset: 0` already defines the box, and a width
	   declaration overrides the inline insets, making the overlay exactly one
	   scrollbar wider than the viewport it covers (Basecamp 10184327445). */
	height:          100dvh;
	/* Override the base .lrn-modal widget: the wrapper stays transparent and
	   the child __backdrop does the dimming, or the page gets covered before
	   the backdrop can dim it (the #9925123520 "overlay disappears" bug). */
	max-width:       none;
	max-height:      none;
	background:      transparent;
	border:          0;
	border-radius:   0;
	box-shadow:      none;
	overflow:        visible;
	animation:       none;
	z-index:         100001;
	isolation:       isolate;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         var(--lrn-sp-5);
	box-sizing:      border-box;
}
.lrn-pro-plan-modal .lrn-modal__backdrop {
	position:   fixed;
	inset:      0;
	background: rgba(0, 0, 0, 0.45);
	background: color-mix(in srgb, var(--lrn-text, #1c1c1c) 50%, transparent);
	z-index:    0;
}
.lrn-pro-plan-modal__dialog {
	position:       relative;
	z-index:        1;
	margin:         0;
	width:          100%;
	max-width:      32rem;
	max-height:     calc(100dvh - 40px);
	background:     var(--lrn-bg, var(--lrn-white));
	border:         1px solid var(--lrn-border);
	border-radius:  var(--lrn-radius-lg);
	box-shadow:     var(--lrn-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.18));
	display:        flex;
	flex-direction: column;
	overflow-y:     auto;
}
.lrn-pro-plan-modal .lrn-modal__head {
	padding:       var(--lrn-sp-4) var(--lrn-sp-5);
	border-bottom: 1px solid var(--lrn-border);
}
.lrn-pro-plan-modal .lrn-modal__title {
	margin:      0;
	font-size:   var(--lrn-text-lg);
	font-weight: 600;
	color:       var(--lrn-text);
}
.lrn-pro-plan-modal .lrn-modal__body {
	padding:    var(--lrn-sp-4) var(--lrn-sp-5);
	overflow-y: auto;
}
.lrn-pro-plan-modal .lrn-modal__foot {
	display:         flex;
	justify-content: flex-end;
	gap:             var(--lrn-sp-2);
	padding:         var(--lrn-sp-3) var(--lrn-sp-5);
	border-top:      1px solid var(--lrn-border);
}
.lrn-pro-plan-modal__current {
	color: var(--lrn-text-secondary);
	font-size: var(--lrn-text-sm);
	margin: 0 0 var(--lrn-sp-4);
}
.lrn-pro-plan-modal__plans,
.lrn-pro-plan-modal__timing {
	border: 0;
	margin: 0 0 var(--lrn-sp-4);
	padding: 0;
}
.lrn-pro-plan-modal__legend {
	font-size: var(--lrn-text-sm);
	font-weight: 600;
	color: var(--lrn-text);
	margin-block-end: var(--lrn-sp-2);
	padding: 0;
}
.lrn-pro-plan-modal__plan {
	display: flex;
	align-items: center;
	gap: var(--lrn-sp-3);
	padding: var(--lrn-sp-3);
	border: 1px solid var(--lrn-border);
	border-radius: var(--lrn-radius-md);
	margin-block-end: var(--lrn-sp-2);
	cursor: pointer;
}
.lrn-pro-plan-modal__plan:has(.lrn-pro-plan-modal__plan-input:checked) {
	border-color: var(--lrn-accent);
	background: var(--lrn-accent-bg);
}
.lrn-pro-plan-modal__plan-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.lrn-pro-plan-modal__plan-name {
	font-weight: 600;
	color: var(--lrn-text);
}
.lrn-pro-plan-modal__plan-price {
	font-size: var(--lrn-text-sm);
	color: var(--lrn-text-secondary);
}
.lrn-pro-plan-modal__timing-opt {
	display: flex;
	align-items: center;
	gap: var(--lrn-sp-2);
	padding-block: var(--lrn-sp-2);
	cursor: pointer;
}
.lrn-pro-plan-modal__summary {
	min-height: 1.5rem;
}
.lrn-pro-plan-modal__summary-loading,
.lrn-pro-plan-modal__summary-note {
	font-size: var(--lrn-text-sm);
	color: var(--lrn-text-secondary);
	margin: 0;
}
.lrn-pro-plan-modal__quote {
	background: var(--lrn-surface-2);
	border-radius: var(--lrn-radius-md);
	padding: var(--lrn-sp-3) var(--lrn-sp-4);
}
.lrn-pro-plan-modal__quote-line {
	display: flex;
	justify-content: space-between;
	gap: var(--lrn-sp-4);
	font-size: var(--lrn-text-sm);
	color: var(--lrn-text-secondary);
	padding-block: 2px;
}
.lrn-pro-plan-modal__quote-net {
	margin-block-start: var(--lrn-sp-2);
	padding-block-start: var(--lrn-sp-2);
	border-block-start: 1px solid var(--lrn-border);
	font-size: var(--lrn-text-base);
	font-weight: 600;
	color: var(--lrn-text);
}
.lrn-pro-plan-modal__quote-net .lrn-pro-plan-modal__quote-value {
	color: var(--lrn-accent);
}

/* ── Gift CTA on the pricing page (links to the dedicated gift page) ── */
.lrn-gift-cta {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--lrn-sp-4, 16px);
	margin:          var(--lrn-sp-6, 24px) 0;
	padding:         var(--lrn-sp-5, 20px);
	border:          1px solid var(--lrn-border, rgba(55, 53, 47, 0.09));
	border-radius:   var(--lrn-radius-lg, 8px);
	background:      var(--lrn-bg-secondary);
	flex-wrap:       wrap;
}

.lrn-gift-cta__title {
	margin:    0 0 var(--lrn-sp-1, 4px);
	font-size: var(--lrn-text-lg, 18px);
}

.lrn-gift-cta__intro {
	margin: 0;
	color:  var(--lrn-text-secondary, #6b6b6b);
}

.lrn-gift-cta__link {
	flex-shrink: 0;
}

/* ── Dedicated gift page ── */
.lrn-gift-page {
	max-width: var(--lrn-container, 1100px);
	margin:    0 auto;
	padding:   var(--lrn-sp-6, 24px) var(--lrn-sp-4, 16px);
}

.lrn-gift-section__back {
	margin-top: var(--lrn-sp-5, 20px);
}

.lrn-gift-section__back a {
	color:           var(--lrn-accent, #2383e2);
	text-decoration: none;
}

.lrn-gift-section__back a:hover,
.lrn-gift-section__back a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 640px) {
	.lrn-gift-cta {
		flex-direction: column;
		align-items:    stretch;
	}
}