/* Licence panel (#offcanvasTopLicense): overview, seat change, billing cycle, invoices,
   payment method and cancel/resume panes - including the before/after comparison cards.

   Moved out of Pages/Index.cshtml. Loaded AFTER bootstrap.min.css in _Layout.cshtml: these
   rules used to sit in a <style> block at the end of the body and win equal-specificity
   clashes with Bootstrap by document order, so the link order has to preserve that. */

#offcanvasTopLicense {
	font-family: 'Inter', 'Poppins', sans-serif !important;
}

#offcanvasTopLicense h3,
#offcanvasTopLicense h5,
#offcanvasTopLicense .h5,
#offcanvasTopLicense .price-lg,
#offcanvasTopLicense .lic-title,
#offcanvasTopLicense .lic-section-title,
#offcanvasTopLicense .lic-billing-title,
#offcanvasTopLicense #subscriptionAmount {
	font-family: 'Hanken Grotesk', sans-serif !important;
}

#offcanvasTopLicense .font-monospace,
#offcanvasTopLicense #subscriptionCardLastFour,
#offcanvasTopLicense #startDate,
#offcanvasTopLicense #endDate {
	font-family: 'JetBrains Mono', monospace !important;
}

/* Custom styles for License Tab template conversion */
.license-card {
	background-color: #ffffff;
	border: 1px solid #e0e3e5;
	border-radius: 1rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	padding: 2rem;
	margin-bottom: 1.5rem;
}

.license-icon-box {
	width: 3rem;
	height: 3rem;
	border-radius: 0.5rem;
	background-color: #f2f4f6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #0051d5;
}

/* Status badges. Shared by the licence panel header and swapped by
   renderSubscriptionDetails() as the Paddle status changes. */
.badge-status-active,
.badge-status-cancelled,
.badge-status-paused,
.badge-status-pastdue {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	border-radius: 50rem;
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap;
}

.badge-status-active {
	background-color: #dcfce7 !important;
	color: #166534 !important;
}

.badge-status-cancelled {
	background-color: #fef3c7 !important;
	color: #92400e !important;
}

.badge-status-paused {
	background-color: #e0e7ff !important;
	color: #3730a3 !important;
}

.badge-status-pastdue {
	background-color: #fee2e2 !important;
	color: #991b1b !important;
}

/* ── Licence panel: single-card shell with a left nav rail (stitch design) ── */
.lic-page {
	padding: 1.5rem;
}

.lic-shell {
	max-width: 1280px;
	margin: 0 auto;
	background-color: #ffffff;
	border: 1px solid #f3f4f6;
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	padding: 2rem;
}

.lic-header {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #e5e7eb;
	padding-bottom: 1.5rem;
	margin-bottom: 2rem;
}

.lic-title {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #111827;
	margin: 0;
}

.lic-body {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}

.lic-sidebar {
	width: 240px;
	flex-shrink: 0;
}

.lic-nav {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.lic-nav-item {
	display: flex;
	align-items: center;
	width: 100%;
	background: none;
	border: 0;
	padding: 0.5rem 0.75rem;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #4b5563;
	text-align: left;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lic-nav-item:hover {
	background-color: #f9fafb;
	color: #111827;
	text-decoration: none;
}

/* Active item mirrors the app navbar's active tab (.btn-theme-active in main.css):
   the #35d3c9 brand teal. */
.lic-nav-item--active,
.lic-nav-item--active:hover {
	background-color: #f3f4f6;
	color: #35d3c9;
}

/* Locked nav item: Paddle refuses every subscription change while past_due, so those panes
   are made unreachable rather than letting their preview calls fail inside the pane. */
/* Invoice pager. Sits under the table; hidden when there is only one page. */
.lic-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

.lic-pager-range {
	font-size: 0.8125rem;
	color: #6b7280;
}

.lic-pager-controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.lic-pager-label {
	font-size: 0.8125rem;
	color: #6b7280;
	min-width: 6.5rem;
	text-align: center;
}

.lic-pager .lic-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.lic-nav-item.lic-nav-item--locked {
	color: #9ca3af;
	cursor: not-allowed;
}

.lic-nav-item.lic-nav-item--locked:hover {
	background-color: transparent;
	color: #9ca3af;
}

.lic-nav-item.lic-nav-item--locked .lic-nav-icon,
.lic-nav-item.lic-nav-item--locked:hover .lic-nav-icon {
	color: #d1d5db;
}

.lic-nav-lock {
	margin-left: auto;
	padding-left: 0.5rem;
	font-size: 0.75rem;
	color: #9ca3af;
	flex-shrink: 0;
}

.lic-nav-icon {
	width: 1.25rem;
	margin-right: 0.75rem;
	text-align: center;
	flex-shrink: 0;
	color: #9ca3af;
}

.lic-nav-item:hover .lic-nav-icon {
	color: #6b7280;
}

/* After the :hover rule, and more specific than it, so hovering the active item
   doesn't knock its icon back to grey. */
.lic-nav-item--active .lic-nav-icon,
.lic-nav-item--active:hover .lic-nav-icon {
	color: #35d3c9;
}

.lic-nav-item--danger {
	color: #b91c1c;
}

.lic-nav-item--danger .lic-nav-icon,
.lic-nav-item--danger:hover .lic-nav-icon {
	color: #ef4444;
}

.lic-nav-item--danger:hover {
	background-color: #fef2f2;
	color: #991b1b;
}

.lic-nav-item--success {
	color: #15803d;
}

.lic-nav-item--success .lic-nav-icon,
.lic-nav-item--success:hover .lic-nav-icon {
	color: #22c55e;
}

.lic-nav-item--success:hover {
	background-color: #f0fdf4;
	color: #166534;
}

.lic-content {
	flex: 1 1 auto;
	min-width: 0;
}

.lic-section-title {
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	color: #111827;
	margin: 0 0 1.5rem;
}

/* One row spanning the full width. Flex rather than a fixed column count, because a
   cell can be hidden - the payment method has nothing truthful to say for PayPal or a
   wallet - and a fixed count would leave its column standing empty.
   The cells size to their content and the slack goes between them, not inside them:
   growing them instead would pile the whole surplus into the last cell, whose text is
   left-aligned, and read as a gap on the right of the row. */
.lic-info-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.5rem;
	/* Stop the last cell short of the panel edge. 1.5rem is the billing card's own
	   inner padding, so the row ends on the same line as the figures inside it. */
	padding-right: 1.5rem;
	margin-bottom: 2.5rem;
	font-size: 0.875rem;
}

.lic-info-cell {
	flex: 0 1 auto;
	min-width: 0;
}

.lic-info-label {
	color: #6b7280;
	margin: 0 0 0.25rem;
}

/* Tooltips are anchored to #offcanvasTopLicense (see initLicenceTooltips) so they
   share the panel's stacking layer instead of ending up behind it. Keep them above
   everything the panel itself paints. */
#offcanvasTopLicense .tooltip {
	z-index: 10600;
}

/* Ghost info affordance next to a label; carries a Bootstrap tooltip. */
.lic-info-hint {
	background: none;
	border: 0;
	padding: 0;
	margin-left: 0.25rem;
	line-height: 1;
	color: #9ca3af;
	vertical-align: baseline;
	cursor: help;
	transition: color 0.15s ease;
}

.lic-info-hint:hover,
.lic-info-hint:focus-visible {
	color: #4b5563;
}

.lic-info-hint:focus-visible {
	outline: 2px solid #6366f1;
	outline-offset: 2px;
	border-radius: 0.125rem;
}

.lic-info-value {
	font-weight: 500;
	color: #1f2937;
	margin: 0;
}

.lic-info-muted {
	color: #6b7280;
	font-weight: 400;
}

.lic-info-note {
	color: #9ca3af;
	font-size: 0.75rem;
	margin: 0.25rem 0 0;
}

.lic-payment-value {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.lic-card-icon {
	font-size: 1.25rem;
	color: #1e40af;
}

/* Real brand marks, used instead of the icon font wherever we ship a logo for the method.
   Height is pinned to .lic-card-icon's font-size so a logo and a glyph sit on the same line, and
   width is left free: these marks have nothing in common aspect-ratio wise - UnionPay is nearly
   square, the Visa wordmark is three times as wide - and a fixed width would squash half of them. */
.lic-method-logo {
	height: 1.25rem;
	width: auto;
	max-width: 3.25rem;
	object-fit: contain;
	flex: 0 0 auto;
}

.lic-card-dots {
	color: #9ca3af;
	letter-spacing: 0.1em;
}

.lic-card-expiry {
	color: #6b7280;
	font-weight: 400;
}

/* Expired / expires this month: the next renewal will fail, so make it obvious. */
.lic-card-expiry.is-expiring {
	color: #b91c1c;
	font-weight: 500;
}

/* Next-payment breakdown */
.lic-billing-card {
	background-color: #f8f9fa;
	border: 1px solid #f3f4f6;
	border-radius: 0.75rem;
	padding: 1.5rem;
}

.lic-billing-title {
	font-size: 1.125rem;
	line-height: 1.5rem;
	font-weight: 700;
	color: #111827;
	margin: 0 0 1rem;
}

.lic-billing-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

.lic-billing-row--item {
	font-size: 1rem;
	font-weight: 700;
	color: #111827;
}

.lic-billing-row--tax {
	margin-bottom: 1.5rem;
}

.lic-billing-label {
	color: #6b7280;
}

.lic-billing-amount {
	text-align: right;
	white-space: nowrap;
}

.lic-billing-tax-note {
	font-size: 0.75rem;
	font-weight: 400;
	color: #9ca3af;
	margin-left: 0.25rem;
}

.lic-billing-sep {
	border: 0;
	border-top: 1px solid #e5e7eb;
	margin: 0 0 1rem;
	opacity: 1;
}

.lic-billing-row--credit {
	color: #166534;
	font-weight: 500;
}

.lic-billing-row--total {
	margin-bottom: 0;
}

.lic-billing-total-label {
	font-weight: 700;
	color: #374151;
}

.lic-billing-total-value {
	font-size: 1.125rem;
	font-weight: 700;
	color: #111827;
}

.lic-billing-note {
	font-size: 0.875rem;
	color: #4b5563;
	margin: 0;
}

.lic-billing-strong {
	font-weight: 600;
	color: #111827;
}


/* ── Panes: the sidebar swaps these inside .lic-content (no modals) ── */
.lic-pane {
	display: none;
	/* Anchor for .lic-guard, which covers the whole pane when it cannot be acted on. */
	position: relative;
}

.lic-pane.is-active {
	display: block;
}

.lic-pane-lead {
	font-size: 0.875rem;
	color: #6b7280;
	margin: -0.75rem 0 1.5rem;
	max-width: 60ch;
}

/* A pane's opening row: the explanation on the left, and whatever the customer sets before the
   preview can answer on the right. The text is capped at 60ch for reading, which leaves the rest
   of the row empty - this puts it to use rather than stacking the control underneath and pushing
   the comparison below the fold. */
.lic-pane-head {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
}

/* Capped at the same 60ch the paragraphs inside it use. Without the cap the column stretched to
   fill the row while its text stopped at 60ch, opening a band of dead space that read as the two
   halves being unrelated. */
.lic-pane-head-text {
	flex: 1 1 28ch;
	min-width: 0;
	max-width: 60ch;
}

/* Wide enough for the label and the stepper to sit apart without crowding, and fixed rather than
   shrink-to-fit: sized to its contents it would change width as the seat count goes from 9 to 10,
   moving the button under the finger pressing it. */
.lic-pane-head-aside {
	flex: 0 1 21rem;
}

/* The panel sets its own type scale and Bootstrap's default label ignores it - larger and darker
   than everything around it, which made the one checkbox in here read as the loudest thing on the
   pane. Sized with the lead, and kept a shade darker than it because this one is acted on. */
.lic-pane-head-aside .form-check-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: #374151;
	cursor: pointer;
}

/* Bootstrap's blue is the only blue in the panel; the checked state follows the buttons instead. */
.lic-pane-head-aside .form-check-input {
	cursor: pointer;
}

.lic-pane-head-aside .form-check-input:checked {
	background-color: #111827;
	border-color: #111827;
}

.lic-pane-head-aside .form-check-input:focus {
	border-color: #9ca3af;
	box-shadow: 0 0 0 0.2rem rgba(17, 24, 39, 0.15);
}

/* Two columns need room for both. Below that the aside goes back under the text, which is where
   it started. */
@media (max-width: 991.98px) {
	.lic-pane-head {
		flex-direction: column;
		gap: 0;
	}

	.lic-pane-head-aside {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* The standing rule under a pane's lead - true of every change, not of the one being made. Set
   quieter than the lead so it reads as reference rather than instruction; it follows a lead that
   already carries its own bottom margin, so this one only closes the gap it opens. */
.lic-pane-note {
	font-size: 0.8125rem;
	color: #9ca3af;
	margin: -1.25rem 0 1.5rem;
	max-width: 60ch;
}

.lic-pane-note a {
	color: inherit;
	text-decoration: underline;
}

.lic-pane-note a:hover {
	color: #4b5563;
}

/* Buttons */
.lic-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 0.375rem;
	border: 1px solid transparent;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	/* Bootstrap underlines <a> — the invoice download button is a link. */
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lic-btn:hover {
	text-decoration: none;
}

.lic-btn:disabled,
.lic-btn.disabled {
	opacity: 0.55;
	pointer-events: none;
}

.lic-btn--primary {
	background-color: #111827;
	color: #ffffff;
}

.lic-btn--primary:hover {
	background-color: #1f2937;
	color: #ffffff;
}

.lic-btn--secondary {
	background-color: #ffffff;
	border-color: #d1d5db;
	color: #374151;
}

.lic-btn--secondary:hover {
	background-color: #f9fafb;
	color: #111827;
}

.lic-btn--danger {
	background-color: #b91c1c;
	color: #ffffff;
}

.lic-btn--danger:hover {
	background-color: #991b1b;
	color: #ffffff;
}

.lic-btn--success {
	background-color: #15803d;
	color: #ffffff;
}

.lic-btn--success:hover {
	background-color: #166534;
	color: #ffffff;
}

.lic-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* Inline notes (replaces the Bootstrap alert-* look inside the panel) */
.lic-note {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.25rem;
	margin-top: 1rem;
}

.lic-note--info {
	background-color: #eff6ff;
	color: #1e40af;
}

.lic-note--warn {
	background-color: #fffbeb;
	color: #92400e;
}

.lic-note--danger {
	background-color: #fef2f2;
	color: #991b1b;
}

/* Same treatment .lic-pane-note gives its links: inherit the note's own colour and
   carry an underline. Each variant sets a different text colour against a different
   tint, so a link with a colour of its own would clash in one of the three - most
   obviously the default blue on --info's blue wash. */
.lic-note a {
	color: inherit;
	text-decoration: underline;
}

.lic-note a:hover {
	text-decoration: none;
}

/* ── Pane guard ────────────────────────────────────────────────────────────
   A pane that has nothing it can do right now. The content stays where it is -
   what the change would have cost is still worth reading - but goes behind
   frosted glass, so nothing underneath reads as pressable, and the card on top
   carries the one action that clears the way. Covering the pane also swallows
   the clicks, which is why the content beneath needs no disabling of its own. */
.lic-guard {
	position: absolute;
	/* Bled past the pane rather than flush with it. Flush, the frost ends exactly where
	   the content does - a hard line running down the side of text it is blurring, which
	   reads as clipped. Out here the edge falls on the empty gutter either side instead,
	   where there is nothing for it to cut through. Both bleeds stay inside .lic-shell's
	   2rem padding and .lic-body's 2rem gap, so nothing is covered that should not be. */
	inset: -0.75rem -1.25rem;
	border-radius: 0.75rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	/* Stated before the filter on purpose: where backdrop-filter is unsupported this
	   wash alone still separates the guard from the content, just without the blur. */
	background-color: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.lic-guard-card {
	max-width: 26rem;
	padding: 1.5rem;
	text-align: center;
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 0.75rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.lic-guard-icon {
	font-size: 1.5rem;
	color: #4b5563;
}

.lic-guard-title {
	font-size: 1rem;
	font-weight: 700;
	color: #111827;
	margin: 0.5rem 0 0.375rem;
}

.lic-guard-text {
	font-size: 0.875rem;
	line-height: 1.4;
	color: #4b5563;
	margin: 0 0 1.25rem;
}

/* Consequence lists (cancel pane, billing-change pane) */
.lic-bullets {
	margin: 0;
	padding-left: 1.125rem;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: #4b5563;
}

.lic-bullets li + li {
	margin-top: 0.5rem;
}

.lic-bullets strong {
	color: #111827;
	font-weight: 600;
}

/* Seat delta pill (JS rewrites the modifier, so keep the base minimal) */
.lic-delta-badge {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	border-radius: 50rem;
	font-size: 0.75rem;
	font-weight: 600;
}

.lic-delta-badge--up {
	background-color: #dcfce7;
	color: #166534;
}

.lic-delta-badge--down {
	background-color: #e0e7ff;
	color: #3730a3;
}

.lic-delta-badge--none {
	background-color: #f3f4f6;
	color: #6b7280;
}

/* Seat before/after cards. The two states sit side by side with the delta badge on the
   "new" card; on a narrow panel they stack and the arrow turns to point down. */
.lic-seat-compare {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
	margin-top: 1rem;
}

.lic-seat-card {
	flex: 1 1 0;
	min-width: 0;
	background-color: #f8f9fa;
	border: 1px solid #f3f4f6;
	border-radius: 0.75rem;
	padding: 1rem 1.25rem;
}

/* The target state is the one being decided on, so it reads as the foreground card. */
.lic-seat-card--new {
	background-color: #ffffff;
	border-color: #d1d5db;
}

.lic-seat-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.375rem;
	min-height: 1.25rem;
}

.lic-seat-card-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b7280;
}

.lic-seat-card-count {
	display: block;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	color: #111827;
}

.lic-seat-card--current .lic-seat-card-count {
	color: #6b7280;
}

/* Effective per-seat rate, with the undiscounted rate struck through beside it and the
   saving as a badge. The headline comparison between the two cards: it is what the volume
   discount actually does to the price of a seat. */
.lic-seat-card-perseat {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.8125rem;
	color: #6b7280;
}

.lic-seat-perseat-was {
	text-decoration: line-through;
	color: #9ca3af;
	margin-right: 0.25rem;
}

.lic-seat-off-badge {
	display: inline-block;
	margin-left: 0.375rem;
	padding: 0.0625rem 0.375rem;
	border-radius: 50rem;
	font-size: 0.6875rem;
	font-weight: 600;
	background-color: #dcfce7;
	color: #166534;
}

/* Emptying the badge is not the same as removing it: padding and a green pill stay behind, which
   at 0% off reads as a discount too small to name. The callers clear the text in several places,
   so it is settled here once rather than asking each of them to remember. */
.lic-seat-off-badge:empty,
.lic-seat-perseat-was:empty {
	display: none;
}

/* Per-card next-payment breakdown, laid out like the Overview's "Next payment" card so the
   two read the same way. Separated from the seat count by a rule. */
.lic-seat-card-rows {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid #e5e7eb;
}

.lic-seat-rows-title {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #9ca3af;
}

/* The date that block's payment lands on, where the two cards do not share one. Sentence
   case so it reads as a date rather than shouting along with the label. */
.lic-seat-rows-date {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	color: #6b7280;
}

/* Second block inside a card (what settles today), fenced off from the next payment above
   it. Repeats the row gap because it is its own flex context, not part of the parent's. */
.lic-seat-card-today {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid #e5e7eb;
}

.lic-seat-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	font-size: 0.8125rem;
}

.lic-seat-row-label {
	color: #6b7280;
}

.lic-seat-row--strong {
	font-weight: 700;
	color: #111827;
}

/* Stands in for the <hr> the Overview card uses between a running list and its bottom line. */
.lic-seat-row--top {
	padding-top: 0.5rem;
	border-top: 1px solid #e5e7eb;
}

.lic-seat-row--strong .lic-seat-row-label {
	color: #374151;
}

/* Tax reads as a breakdown of the charge above it, so it is indented and stays quiet. */
.lic-seat-row--sub {
	font-size: 0.75rem;
	margin-top: -0.25rem;
}

.lic-seat-row--sub .lic-seat-row-label {
	padding-left: 0.75rem;
}

.lic-seat-row--credit {
	font-weight: 700;
	color: #166534;
}

.lic-seat-row--credit .lic-seat-row-label {
	color: #166534;
}

.lic-seat-compare-arrow {
	display: flex;
	align-items: center;
	font-size: 1.125rem;
	color: #9ca3af;
}

.lic-seat-compare-foot {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	color: #6b7280;
	text-align: center;
}

@media (max-width: 575.98px) {
	.lic-seat-compare {
		flex-direction: column;
		gap: 0.5rem;
	}

	.lic-seat-compare-arrow {
		justify-content: center;
		transform: rotate(90deg);
	}
}

/* ── Scheduled switch timeline ─────────────────────────────────────────────
   A step down to monthly does not happen now: the customer keeps the period they
   have already paid for, and the cheaper cycle starts at renewal. The comparison
   cards on their own read as an immediate swap - same shape the seat pane uses for
   a change that IS immediate - so this strip puts the order of events on screen
   above them. Only rendered for that direction. */
.lic-timeline {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 1rem;
	/* Pulled in just off the full width, so the strip sits within the cards below
	   without reading as indented from them. Symmetric, so the 50/50 split further
	   down still centres on the arrow between the cards. */
	padding: 0 0.375rem;
}

/* The split is not a measurement - this is a diagram of what happens in what order,
   not a chart drawn to scale. It is placed instead: the moment the switch lands sits
   directly above the arrow between the comparison cards, so the eye reads the same
   transition twice, once as a date and once as a plan.

   The cards are two equal flex:1 boxes either side of the arrow, which puts the
   arrow's centre at exactly half the row regardless of how wide it is. So the strip
   is split at the same half: the leading segment takes 50% minus the gap, and the
   boundary - the dot that opens the future segment - lands on 50%. */
.lic-timeline-seg {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
}

.lic-timeline-seg--now {
	flex: 0 0 calc(50% - 0.75rem); /* 0.75rem = .lic-timeline gap */
}

.lic-timeline-seg--next {
	flex: 0 0 50%;
}

.lic-timeline-cap {
	font-size: 0.75rem;
	font-weight: 700;
	color: #111827;
}

/* Today is the given; the date the switch lands on is the news, so only that one
   carries full weight. */
.lic-timeline-seg--now .lic-timeline-cap {
	color: #6b7280;
}

/* The rule itself. Each segment starts on a dot marking the moment it begins. */
.lic-timeline-bar {
	position: relative;
	height: 0.25rem;
	border-radius: 50rem;
	background-color: #d1d5db;
}

.lic-timeline-bar::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background-color: #6b7280;
	transform: translate(-0.125rem, -50%);
}

/* What has not happened yet is drawn as an outline rather than a solid, and ends in
   an arrow: the monthly cycle carries on past the edge of the strip. */
.lic-timeline-bar--future {
	background-color: transparent;
	background-image: repeating-linear-gradient(90deg, #c7cbd1 0 0.375rem, transparent 0.375rem 0.75rem);
}

.lic-timeline-bar--future::before {
	background-color: #ffffff;
	border: 2px solid #4b5563;
}

.lic-timeline-bar--future::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -0.125rem;
	border-left: 0.4375rem solid #c7cbd1;
	border-top: 0.3125rem solid transparent;
	border-bottom: 0.3125rem solid transparent;
	transform: translateY(-50%);
}

.lic-timeline-text {
	font-size: 0.75rem;
	color: #6b7280;
}

@media (max-width: 575.98px) {
	/* Stacked, the two segments read top-to-bottom as the same sequence. */
	.lic-timeline {
		flex-direction: column;
		gap: 0.75rem;
	}

	.lic-timeline-seg--now,
	.lic-timeline-seg--next {
		flex: 0 0 auto;
	}
}

/* Skeleton stand-in for a value waiting on a Paddle preview. */
.lic-skel {
	display: inline-block;
	width: 4.5rem;
	height: 0.875rem;
	vertical-align: middle;
	border-radius: 0.25rem;
	background-color: #e5e7eb;
	background-image: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 45%, #e5e7eb 80%);
	background-size: 250% 100%;
	animation: lic-skel-shimmer 1.3s ease-in-out infinite;
}

.lic-skel--sm {
	width: 3rem;
}

.lic-skel--lg {
	width: 6.5rem;
}

/* Plan-card price slots. Sized in em rather than rem so one class covers every copy of the card:
   the hero amount is 40px in the full card and 28px in the compact one, with the Total beside it at
   18px and 15px. A rem-based variant would need four. */
.lic-skel--price {
	width: 2.4em;
	height: 0.7em;
}

@keyframes lic-skel-shimmer {
	0% {
		background-position: 160% 0;
	}

	100% {
		background-position: -60% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lic-skel {
		animation: none;
	}
}

/* Invoices table */
.lic-table-wrap {
	overflow-x: auto;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
}

.lic-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	white-space: nowrap;
}

.lic-table th {
	text-align: left;
	font-weight: 500;
	color: #6b7280;
	background-color: #f9fafb;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid #e5e7eb;
}

.lic-table td {
	padding: 0.875rem 1rem;
	border-bottom: 1px solid #f3f4f6;
	color: #1f2937;
}

.lic-table tbody tr:last-child td {
	border-bottom: 0;
}

.lic-table .lic-td-right {
	text-align: right;
}

.lic-pill {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	border-radius: 50rem;
	font-size: 0.75rem;
	font-weight: 500;
}

.lic-pill--paid { background-color: #dcfce7; color: #166534; }
.lic-pill--pending { background-color: #fef3c7; color: #92400e; }
.lic-pill--failed { background-color: #fee2e2; color: #991b1b; }
.lic-pill--other { background-color: #f3f4f6; color: #4b5563; }

/* Pane-level loading / empty states */
.lic-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 2.5rem 1rem;
	color: #6b7280;
	font-size: 0.875rem;
	text-align: center;
}

/* Payment method pane */
.lic-saved-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	background-color: #ffffff;
}

.lic-saved-card-meta {
	flex: 1 1 auto;
	min-width: 0;
}

.lic-saved-card-primary {
	font-size: 0.875rem;
	font-weight: 500;
	color: #1f2937;
	margin: 0;
}

.lic-saved-card-secondary {
	font-size: 0.75rem;
	color: #9ca3af;
	margin: 0.125rem 0 0;
}

.lic-input {
	padding: 0.5rem 0.75rem;
	border: 1px solid #d1d5db;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	color: #1f2937;
	background-color: #ffffff;
}

.lic-input:focus {
	outline: 2px solid #6366f1;
	outline-offset: 2px;
	border-color: #6366f1;
}

.lic-field-error {
	font-size: 0.75rem;
	color: #b91c1c;
	margin: 0.375rem 0 0;
}

/* Paddle renders its inline payment-update iframe in here. */
.paddle-pmupdate-frame {
	min-height: 320px;
}

/* Section heading *within* a pane (the pane's own h2 is .lic-section-title). Do not pair
   this with .lic-pane-lead — that class carries a negative top margin so it can tuck
   under .lic-section-title, and it collides with this. Use .lic-subhead-help instead. */
.lic-subhead {
	font-size: 0.875rem;
	font-weight: 600;
	color: #111827;
	margin: 2rem 0 0.25rem;
}

.lic-subhead-help {
	font-size: 0.8125rem;
	line-height: 1.25rem;
	color: #6b7280;
	margin: 0 0 0.75rem;
	max-width: 60ch;
}

/* Input + its action on one line, mirroring the saved-card row above it. */
.lic-email-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.lic-email-row .lic-input {
	flex: 1 1 15rem;
	min-width: 0;
	max-width: 22rem;
}
@media (max-width: 991.98px) {
	.lic-info-cell {
		flex-basis: calc(50% - 0.75rem);
	}
}

@media (max-width: 767.98px) {
	.lic-page {
		padding: 1rem 0;
	}

	.lic-shell {
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		padding: 1.5rem 1rem;
	}

	.lic-body {
		flex-direction: column;
		gap: 1.5rem;
	}

	.lic-sidebar {
		width: 100%;
	}

	.lic-info-grid {
		gap: 1.25rem;
		margin-bottom: 2rem;
	}

	.lic-info-cell {
		flex-basis: 100%;
	}
}

/* Seat Row Box Container (seat_row_image.png tasarımı) */
.card-seat-row-box {
	background-color: #f7f9fa !important;
	border: 1px solid #eaedf0 !important;
	border-radius: 0.75rem !important;
	padding: 0.65rem 0.85rem !important;
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
	width: 100%;
}

/* The billing pane's seat row is shown and hidden, which Bootstrap's d-flex makes impossible:
   it sets `display: flex !important` and wins against both the inline `display:none` it ships
   with and anything jQuery sets later. Same layout, declared here so it can lose an argument. */
.lic-billing-seat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.card-seat-row-box .card-seat-label {
	font-size: 0.925rem;
	font-weight: 500;
	color: #191c1e;
}

/* Pricing kartı seat stepper ([-] [input] [+]) */
.card-seat-stepper {
	display: none; /* JS pricing aktifken inline-flex yapar */
	align-items: stretch;
	height: 2.15rem;
	border: 1px solid #d0d5dd;
	border-radius: 0.5rem;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
	flex-shrink: 0;
}
.card-seat-stepper .seat-step {
	border: 0;
	background: #ffffff;
	color: #475467;
	width: 2.1rem;
	flex: 0 0 2.1rem;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	transition: background-color .12s ease, color .12s ease;
}
.card-seat-stepper .seat-step:hover {
	background: #f1f5f9;
	color: #0f172a;
}
.card-seat-stepper .seat-step:active {
	background: #e2e8f0;
}
.card-seat-stepper .seat-step-minus {
	border-right: 1px solid #eaedf0;
}
.card-seat-stepper .seat-step-plus {
	border-left: 1px solid #eaedf0;
}
.card-seat-stepper .card-seat-input,
.card-seat-stepper .seat-modal-input {
	border: 0;
	outline: none;
	width: 2.6rem;
	flex: 0 0 2.6rem;
	text-align: center;
	font-size: 0.95rem;
	font-weight: 600;
	color: #0f172a;
	background: transparent;
	min-width: 0;
}
.card-seat-stepper .card-seat-input:focus,
.card-seat-stepper .seat-modal-input:focus {
	outline: none;
	box-shadow: none;
}
			/* Past-due notice above the licence panel body. Sits between the header and .lic-body. */
.lic-alert {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	border-radius: 0.5rem;
	border: 1px solid transparent;
}

.lic-alert--pastdue {
	--lic-alert-accent: #991b1b;
	background-color: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}

/* A change booked in for the renewal. Deliberately blue rather than amber: nothing is
   wrong, and the customer asked for this - it is a standing note, not a warning. */
.lic-alert--scheduled {
	--lic-alert-accent: #1e40af;
	background-color: #eff6ff;
	border-color: #bfdbfe;
	color: #1e40af;
}

.lic-alert-icon {
	font-size: 1.25rem;
	flex: 0 0 auto;
}

.lic-alert-body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
	flex: 1 1 auto;
}

.lic-alert-title {
	font-weight: 600;
	font-size: 0.9375rem;
}

.lic-alert-text {
	font-size: 0.8125rem;
	opacity: 0.9;
}

/* The action takes its colour from the banner it sits in. It used to be the past-due red wherever
   it appeared, which put a red button inside the blue "change scheduled" notice - reading as a
   warning about the notice rather than an action on it. Each variant declares its own accent
   above; the red stays as the fallback. */
.lic-alert-action {
	flex: 0 0 auto;
	padding: 0.375rem 0.875rem;
	border-radius: 0.375rem;
	border: 1px solid var(--lic-alert-accent, #991b1b);
	background: transparent;
	color: var(--lic-alert-accent, #991b1b);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
}

.lic-alert-action:hover {
	background: var(--lic-alert-accent, #991b1b);
	color: #ffffff;
}

/* Stack on narrow screens so the action button keeps its full label. */
@media (max-width: 575.98px) {
	.lic-alert {
		align-items: flex-start;
		flex-wrap: wrap;
	}
	.lic-alert-action {
		width: 100%;
	}
}



/* Inline action confirmation. The commit buttons in this panel charge a card, so the first press
   arms them and states what is about to happen; this is the line that says it.
   Deliberately neutral: it is a question, not a warning, and the amber "warn" palette next to it
   is reserved for things that are actually wrong. */
.lic-confirm-note {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	background-color: #f3f4f6;
	color: #374151;
	font-size: 0.875rem;
	font-weight: 500;
}

/* The button keeps its normal colour while armed - only the label changes. The question above it
   is what marks the state, so the button does not need to shout as well. */