/*
 * Paywall UI — locked placeholder + subscription dialog.
 *
 * Colours are taken from the theme's own custom properties, with literal
 * fallbacks so the component still looks right if it is ever rendered outside
 * textmaker-modern. Layout is RTL-first and fluid; the dialog becomes a
 * bottom sheet on narrow screens, which is where most of this traffic lands.
 */

.tmm-locked,
.tmm-modal {
	--tmm-bg: var(--surface, #16161f);
	--tmm-bg-2: var(--surface-2, #1d1d29);
	--tmm-border: var(--border, rgba(255, 255, 255, .08));
	--tmm-border-strong: var(--border-strong, rgba(255, 255, 255, .14));
	--tmm-text: var(--text, #ecedf5);
	--tmm-muted: var(--text-muted, #a2a3b4);
	--tmm-accent: var(--accent, #a855f7);
	--tmm-accent-2: var(--accent-2, #22d3ee);
	--tmm-grad: var(--grad, linear-gradient(135deg, #a855f7 0%, #6366f1 45%, #22d3ee 100%));
	--tmm-radius: var(--radius, 16px);
	--tmm-radius-sm: var(--radius-sm, 11px);

	font-family: inherit;
	direction: rtl;
	text-align: right;
}

/* ---------------------------------------------------------------- Locked */

.tmm-locked {
	position: relative;
	margin: 28px 0;
	padding: 40px 28px;
	border: 1px solid var(--tmm-border-strong);
	border-radius: var(--tmm-radius);
	background:
		radial-gradient(120% 100% at 50% 0%, rgba(168, 85, 247, .14), transparent 62%),
		var(--tmm-bg-2);
	text-align: center;
	color: var(--tmm-text);
}

.tmm-locked__icon {
	width: 60px;
	height: 60px;
	margin: 0 auto 18px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(168, 85, 247, .12);
	border: 1px solid rgba(168, 85, 247, .32);
	color: var(--tmm-accent);
}

.tmm-locked__icon svg { width: 28px; height: 28px; }

.tmm-locked__title {
	margin: 0 0 10px;
	font-size: clamp(1.05rem, 2.6vw, 1.35rem);
	font-weight: 700;
	line-height: 1.7;
	color: var(--tmm-text);
}

.tmm-locked__text {
	margin: 0 auto 22px;
	max-width: 46ch;
	font-size: .95rem;
	line-height: 2;
	color: var(--tmm-muted);
}

.tmm-locked__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* ---------------------------------------------------------------- Buttons */

.tmm-btn {
	appearance: none;
	border: 1px solid transparent;
	border-radius: var(--tmm-radius-sm);
	padding: 13px 26px;
	font: inherit;
	font-size: .95rem;
	font-weight: 700;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
	line-height: 1.4;
}

.tmm-btn:hover:not(:disabled) { transform: translateY(-1px); }
.tmm-btn:active:not(:disabled) { transform: translateY(0); }
.tmm-btn:disabled { opacity: .55; cursor: not-allowed; }

.tmm-btn--primary {
	background: var(--tmm-grad);
	color: #0b0b12;
	box-shadow: 0 8px 26px -10px rgba(168, 85, 247, .8);
}

.tmm-btn--ghost {
	background: transparent;
	border-color: var(--tmm-border-strong);
	color: var(--tmm-text);
}

.tmm-btn--ghost:hover { border-color: var(--tmm-accent); color: var(--tmm-accent); }

.tmm-btn--block { display: block; width: 100%; }

.tmm-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: .88rem;
	color: var(--tmm-accent-2);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.tmm-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.tmm-modal[hidden] { display: none; }

.tmm-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 5, 10, .78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: tmm-fade .22s ease;
}

.tmm-modal__box {
	position: relative;
	width: min(760px, 100%);
	max-height: min(88vh, 900px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 34px 30px 26px;
	border: 1px solid var(--tmm-border-strong);
	border-radius: 22px;
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(168, 85, 247, .16), transparent 60%),
		var(--tmm-bg);
	color: var(--tmm-text);
	box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .85);
	animation: tmm-rise .26s cubic-bezier(.2, .8, .3, 1);
}

@keyframes tmm-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes tmm-rise {
	from { opacity: 0; transform: translateY(18px) scale(.98) }
	to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
	.tmm-modal__box, .tmm-modal__backdrop { animation: none; }
	.tmm-btn { transition: none; }
}

.tmm-modal__close {
	position: absolute;
	inset-inline-start: 16px;
	inset-block-start: 16px;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid var(--tmm-border);
	border-radius: 50%;
	background: var(--tmm-bg-2);
	color: var(--tmm-muted);
	cursor: pointer;
}

.tmm-modal__close:hover { color: var(--tmm-text); border-color: var(--tmm-border-strong); }
.tmm-modal__close svg { width: 17px; height: 17px; }

.tmm-modal__head { text-align: center; margin-bottom: 26px; }

.tmm-modal__badge {
	display: inline-block;
	margin-bottom: 14px;
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(168, 85, 247, .14);
	border: 1px solid rgba(168, 85, 247, .34);
	color: var(--tmm-accent);
	font-size: .78rem;
	font-weight: 700;
}

.tmm-modal__head h2 {
	margin: 0 0 10px;
	font-size: clamp(1.15rem, 3vw, 1.5rem);
	font-weight: 800;
	line-height: 1.7;
}

.tmm-modal__head p {
	margin: 0 auto;
	max-width: 48ch;
	font-size: .92rem;
	line-height: 2;
	color: var(--tmm-muted);
}

.tmm-modal__foot {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--tmm-border);
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	font-size: .88rem;
	color: var(--tmm-muted);
}

/* ---------------------------------------------------------------- Form */

.tmm-field { display: block; margin-bottom: 16px; }

.tmm-field__label {
	display: block;
	margin-bottom: 8px;
	font-size: .86rem;
	font-weight: 600;
	color: var(--tmm-muted);
}

.tmm-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 1px solid var(--tmm-border-strong);
	border-radius: var(--tmm-radius-sm);
	background: var(--tmm-bg-2);
	color: var(--tmm-text);
	/* 16px keeps iOS Safari from zooming the page on focus. */
	font: inherit;
	font-size: 16px;
	direction: ltr;
	text-align: center;
	letter-spacing: 1px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.tmm-input:focus {
	outline: none;
	border-color: var(--tmm-accent);
	box-shadow: 0 0 0 3px rgba(168, 85, 247, .18);
}

.tmm-input--code { letter-spacing: 10px; font-size: 21px; font-weight: 700; }

.tmm-sent { margin: 0 0 16px; font-size: .88rem; line-height: 2; color: var(--tmm-muted); text-align: center; }
.tmm-sent b { color: var(--tmm-text); direction: ltr; display: inline-block; }

.tmm-resend {
	margin-top: 14px;
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	font-size: .84rem;
	color: var(--tmm-muted);
}

.tmm-resend .tmm-link:disabled { color: var(--tmm-muted); text-decoration: none; cursor: default; }

/* ---------------------------------------------------------------- Alerts */

.tmm-alert {
	margin-bottom: 18px;
	padding: 12px 16px;
	border-radius: var(--tmm-radius-sm);
	font-size: .87rem;
	line-height: 1.9;
	border: 1px solid;
}

.tmm-alert[hidden] { display: none; }

.tmm-alert--error { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .4); color: #fca5a5; }
.tmm-alert--ok { background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .4); color: #6ee7b7; }

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

@media (max-width: 600px) {
	.tmm-modal { padding: 0; align-items: flex-end; }

	.tmm-modal__box {
		width: 100%;
		max-height: 92vh;
		padding: 30px 18px 22px;
		border-radius: 22px 22px 0 0;
		border-inline: 0;
		border-bottom: 0;
	}

	.tmm-plans { grid-template-columns: 1fr; }
	.tmm-plan { padding: 18px 16px; }
	.tmm-plan__tag { inset-inline-end: 12px; }
	.tmm-locked { padding: 32px 18px; }
	.tmm-locked__actions .tmm-btn { flex: 1 1 100%; }
}

/* While the dialog is open the page behind it must not scroll. */
body.tmm-modal-open { overflow: hidden; }

/* ================================================================
 * Site-wide lock
 *
 * The page stays sharp and scrollable down to the fold — the header, and
 * on an article its title and cover — and the offer is laid into the page
 * there (see "Locked page" at the end of this file). Everything below it
 * sits under the dialog's blurred backdrop.
 *
 * A blur is a visual effect only — it hides nothing from the document.
 * What is actually behind it is decided on the server (see
 * class-tmm-scramble.php): by default the text back there has the same
 * shape as the article but none of its meaning.
 * ================================================================ */

body.tmm-paywall-lock {
	/* The containing block the in-page offer is positioned against. */
	position: relative;
}

/* Blur applied to the article body itself, underneath the backdrop's blur. */
.tmm-blurred {
	filter: blur(7px);
	-webkit-filter: blur(7px);
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}

/* Nothing behind the lock should be selectable or printable. */
@media print {
	body.tmm-paywall-lock > *:not(#tmm-modal) { display: none !important; }
}

/* ================================================================
 * The offer dialog
 *
 * Two columns on a desktop — what you get on the right (the RTL
 * reading start), what it costs on the left — collapsing to one
 * scrolling sheet under 900px, which is where most of this traffic
 * arrives. The pitch column is the one that scrolls if the benefit
 * list is long, so the plans and the call to action never get pushed
 * out of reach.
 * ================================================================ */

/* The box clips its own rounded corners, so it cannot be the scroll container
 * itself; the pane inside it scrolls instead. Setting `overflow:hidden` here
 * without moving the scrolling inward is what made the dialog unscrollable and
 * put the call to action out of reach on a phone. */
.tmm-modal__box {
	width: min(980px, 100%);
	max-width: 100%;
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/* dvh tracks the mobile browser's shrinking toolbar; vh does not. */
	max-height: min(92vh, 900px);
	max-height: min(92dvh, 900px);
}

/* The header stays put while the offer scrolls under it. */
.tmm-brandbar { flex: 0 0 auto; }

.tmm-pane {
	flex: 1 1 auto;
	/* Without min-height:0 a flex item refuses to shrink below its content, and
	   the overflow below would never engage. */
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.tmm-pane[hidden] { display: none; }

.tmm-pane--narrow,
.tmm-pane[data-tmm-pane="login"] {
	max-width: 460px;
	margin: 0 auto;
	padding: 30px 26px 24px;
}

/* ---------------------------------------------------------- brand bar */

.tmm-brandbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-bottom: 1px solid var(--tmm-border);
	background: rgba(255, 255, 255, .02);
}

.tmm-brandbar__logo {
	display: inline-flex;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	overflow: hidden;
	flex: 0 0 auto;
	background: var(--tmm-bg-2);
}

.tmm-brandbar__logo img { width: 100%; height: 100%; object-fit: cover; }

.tmm-brandbar__name { font-weight: 800; font-size: .98rem; letter-spacing: -.2px; }

.tmm-brandbar__sep {
	width: 1px;
	height: 18px;
	background: var(--tmm-border-strong);
}

.tmm-brandbar__tag {
	font-size: .76rem;
	font-weight: 700;
	color: var(--tmm-accent);
	background: rgba(168, 85, 247, .12);
	border: 1px solid rgba(168, 85, 247, .3);
	border-radius: 999px;
	padding: 4px 12px;
}

.tmm-modal__close { inset-block-start: 14px; width: 34px; height: 34px; }

/* ------------------------------------------------------------- layout */

.tmm-grid {
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	align-items: stretch;
}

/* Grid items default to min-width:auto, which lets a long unbroken word (a URL
   in a plan description, say) force the whole dialog wider than the screen. */
.tmm-grid > * {
	min-width: 0;
	overflow-wrap: anywhere;
}

.tmm-pitch {
	padding: 26px 24px 24px;
	border-inline-end: 1px solid var(--tmm-border);
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(168, 85, 247, .13), transparent 62%),
		transparent;
}

.tmm-offer {
	padding: 26px 24px 22px;
	display: flex;
	flex-direction: column;
	background: rgba(0, 0, 0, .16);
}

/* -------------------------------------------------------------- pitch */

.tmm-modal__badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.tmm-modal__badge svg { width: 13px; height: 13px; }

.tmm-pitch h2 {
	margin: 0 0 8px;
	font-size: clamp(1.16rem, 2.4vw, 1.44rem);
	font-weight: 800;
	line-height: 1.65;
	letter-spacing: -.3px;
}

.tmm-pitch__sub {
	margin: 0 0 20px;
	font-size: .88rem;
	line-height: 1.95;
	color: var(--tmm-muted);
}

.tmm-benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
}

.tmm-benefits li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .875rem;
	line-height: 1.75;
	color: var(--tmm-text);
}

.tmm-benefits__tick {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin-top: 3px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(52, 211, 153, .15);
	border: 1px solid rgba(52, 211, 153, .4);
	color: #34d399;
}

.tmm-benefits__tick svg { width: 11px; height: 11px; }

/* -------------------------------------------------------------- offer */

.tmm-offer__head {
	font-size: .84rem;
	font-weight: 700;
	color: var(--tmm-muted);
	margin-bottom: 11px;
}

.tmm-plans { display: grid; gap: 9px; }

/* Each plan is a label wrapping a radio, so the whole row is the hit area
   and the group still works with JavaScript disabled. */
.tmm-plan {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	border: 1px solid var(--tmm-border-strong);
	border-radius: var(--tmm-radius-sm);
	background: var(--tmm-bg-2);
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.tmm-plan:hover { border-color: rgba(168, 85, 247, .55); transform: translateY(-1px); }

/* The native radio is hidden but still focusable and still the source of truth. */
.tmm-plan input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.tmm-plan__mark {
	width: 19px;
	height: 19px;
	border-radius: 50%;
	border: 2px solid var(--tmm-border-strong);
	display: grid;
	place-items: center;
	transition: border-color .16s ease;
}

.tmm-plan__mark::after {
	content: '';
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--tmm-grad);
	transform: scale(0);
	transition: transform .16s cubic-bezier(.2, .9, .3, 1.4);
}

.tmm-plan input[type="radio"]:checked ~ .tmm-plan__mark { border-color: var(--tmm-accent); }
.tmm-plan input[type="radio"]:checked ~ .tmm-plan__mark::after { transform: scale(1); }

.tmm-plan:has(input[type="radio"]:checked),
.tmm-plan.is-selected {
	border-color: var(--tmm-accent);
	background: linear-gradient(180deg, rgba(168, 85, 247, .11), rgba(168, 85, 247, .03));
	box-shadow: 0 0 0 1px rgba(168, 85, 247, .3), 0 10px 30px -18px rgba(168, 85, 247, .9);
}

/* Keyboard focus must be visible, since the radio itself is not. */
.tmm-plan input[type="radio"]:focus-visible ~ .tmm-plan__mark {
	outline: 2px solid var(--tmm-accent-2);
	outline-offset: 3px;
}

.tmm-plan__body { display: grid; gap: 3px; min-width: 0; }

.tmm-plan__name {
	font-size: .94rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

.tmm-plan__flag {
	font-style: normal;
	font-size: .66rem;
	font-weight: 800;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--tmm-grad);
	color: #0b0b12;
}

.tmm-plan__meta { font-size: .76rem; color: var(--tmm-muted); line-height: 1.7; }
.tmm-plan__desc { font-size: .74rem; color: var(--tmm-text-dim, #6f7080); line-height: 1.7; }

.tmm-plan__cost { text-align: center; line-height: 1.35; flex: 0 0 auto; }
.tmm-plan__cost b { display: block; font-size: 1.12rem; font-weight: 800; letter-spacing: -.4px; }
.tmm-plan__cost small { display: block; font-size: .68rem; color: var(--tmm-muted); }

.tmm-plan__save {
	display: inline-block;
	margin-top: 4px;
	font-style: normal;
	font-size: .64rem;
	font-weight: 800;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(52, 211, 153, .16);
	border: 1px solid rgba(52, 211, 153, .42);
	color: #6ee7b7;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- CTA */

.tmm-cta {
	appearance: none;
	width: 100%;
	margin-top: 16px;
	padding: 15px 20px;
	border: 0;
	border-radius: var(--tmm-radius-sm);
	background: var(--tmm-grad);
	color: #0b0b12;
	font: inherit;
	font-size: 1rem;
	font-weight: 800;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	box-shadow: 0 12px 30px -12px rgba(168, 85, 247, .85);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.tmm-cta svg { width: 17px; height: 17px; }
.tmm-cta:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(168, 85, 247, 1); }
.tmm-cta:active:not(:disabled) { transform: translateY(0); }
.tmm-cta:disabled { opacity: .6; cursor: not-allowed; }

/* --------------------------------------------------------- trust marks */

.tmm-trust {
	list-style: none;
	margin: 15px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.tmm-trust li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .765rem;
	color: var(--tmm-muted);
	line-height: 1.6;
}

.tmm-trust svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--tmm-accent-3, #34d399); }

/* The gateway's own mark needs a light plate: it is brand blue and would
   disappear against this background. */


.tmm-paybar {
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px dashed var(--tmm-border);
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	font-size: .765rem;
	color: var(--tmm-muted);
}

.tmm-paybar__note { color: var(--tmm-text-dim, #6f7080); }

.tmm-offer__foot {
	margin-top: auto;
	padding-top: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: .8rem;
	color: var(--tmm-muted);
}

.tmm-offer__foot b { color: var(--tmm-text); }

/* ------------------------------------------------------------ tablet */

@media (max-width: 900px) {
	.tmm-grid { grid-template-columns: 1fr; }

	.tmm-pitch {
		border-inline-end: 0;
		border-bottom: 1px solid var(--tmm-border);
		padding: 22px 20px 20px;
	}

	/* Two columns of short benefits keeps the price in view on a laptop-ish
	   width without hiding the list. */
	.tmm-benefits { grid-template-columns: 1fr 1fr; gap: 9px 16px; }

	.tmm-offer { padding: 22px 20px 20px; }
}

/* ------------------------------------------------------------ phone */

@media (max-width: 600px) {
	.tmm-modal__box { border-radius: 20px 20px 0 0; max-height: 94vh; }

	.tmm-brandbar { padding: 12px 16px; }
	.tmm-brandbar__tag { display: none; }
	.tmm-brandbar__sep { display: none; }

	.tmm-pitch { padding: 18px 16px 16px; }
	.tmm-offer { padding: 18px 16px 16px; }

	.tmm-pitch h2 { font-size: 1.08rem; }
	.tmm-pitch__sub { margin-bottom: 14px; font-size: .84rem; }

	/* Back to one column: two columns of Persian text at this width wraps badly. */
	.tmm-benefits { grid-template-columns: 1fr; gap: 9px; }
	.tmm-benefits li { font-size: .83rem; }

	.tmm-plan { padding: 11px 12px; gap: 10px; }
	.tmm-plan__name { font-size: .88rem; }
	.tmm-plan__cost b { font-size: 1rem; }

	.tmm-cta { padding: 15px 16px; font-size: .95rem; }
	.tmm-trust { gap: 7px; }
	.tmm-pane--narrow, .tmm-pane[data-tmm-pane="login"] { padding: 22px 16px 18px; }
}

/* ================================================================
 * The "you need a subscription" notice
 * ================================================================ */

.tmm-notice {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	padding: 11px 13px;
	border-radius: var(--tmm-radius-sm);
	background: rgba(239, 68, 68, .1);
	border: 1px solid rgba(239, 68, 68, .32);
	color: #fca5a5;
	font-size: .83rem;
	line-height: 1.8;
}

.tmm-notice svg { width: 17px; height: 17px; flex: 0 0 auto; }
.tmm-notice b { color: #fecaca; }

/* ================================================================
 * Scrolling and sizing
 *
 * The dialog is the only scrollable thing while the page is locked.
 * Everything here is about making that one scroll behave on a phone:
 * no horizontal overflow, nothing taller than the viewport, and the
 * buy button always within thumb reach.
 * ================================================================ */

.tmm-modal { padding: 20px; }

/* Nothing inside may push the dialog sideways. */
.tmm-modal__box *,
.tmm-modal__box *::before,
.tmm-modal__box *::after { box-sizing: border-box; }

.tmm-modal__box img { max-width: 100%; height: auto; }

.tmm-benefits li,
.tmm-plan__body,
.tmm-plan__name,
.tmm-plan__meta,
.tmm-plan__desc { min-width: 0; overflow-wrap: anywhere; }

/* Long plan names must not squeeze the price column away. */
.tmm-plan__cost { min-width: 78px; }

@media (max-width: 900px) {
	/* The buy button follows the visitor down the sheet instead of sitting at
	   the bottom of a long benefit list. Browsers without sticky just leave it
	   inline, which is the old behaviour rather than a broken one. */
	.tmm-actions {
		position: sticky;
		bottom: -1px;
		z-index: 2;
		margin: 0 -2px;
		padding: 10px 2px 6px;
		background: linear-gradient(to top, var(--tmm-bg) 58%, rgba(22, 22, 31, 0));
	}

	.tmm-actions .tmm-cta { margin-top: 0; }
}

@media (max-width: 600px) {
	.tmm-modal {
		padding: 0;
		align-items: flex-end;
	}

	.tmm-modal__box {
		width: 100%;
		max-height: 92dvh;
		border-radius: 20px 20px 0 0;
		border-inline: 0;
		border-bottom: 0;
	}

	/* A grab handle, so the sheet reads as scrollable at a glance. */
	.tmm-brandbar::before {
		content: '';
		position: absolute;
		top: 6px;
		inset-inline: 0;
		margin: 0 auto;
		width: 38px;
		height: 4px;
		border-radius: 999px;
		background: var(--tmm-border-strong);
	}

	.tmm-brandbar { position: relative; padding-top: 16px; }

	.tmm-pitch__head { padding-bottom: 2px; }

	/* Comfortable tap targets: 44px is the smallest reliable one. */
	.tmm-plan { min-height: 56px; }
	.tmm-link { padding: 6px 2px; }
	.tmm-modal__close { width: 38px; height: 38px; }

	.tmm-paybar { font-size: .72rem; gap: 7px; }
	.tmm-trust li { font-size: .73rem; }
}

/* Landscape phones and very short windows: keep it scrollable rather than
   hiding items, so nothing in the offer becomes unreachable. */
@media (max-height: 560px) {
	.tmm-modal { padding: 0; align-items: stretch; }
	.tmm-modal__box { max-height: 100dvh; border-radius: 0; }
}

/* The plan's own description repeats what the meta line already says
   ("سه ماه دسترسی کامل" vs "دسترسی کامل ... به مدت ۹۰ روز"), and on a phone
   that duplication costs two lines per plan. Keep it where there is room. */
@media (max-width: 600px) {
	.tmm-plan__desc { display: none; }
}

/* ================================================================
 * Tagline and the single-plan case
 * ================================================================ */

.tmm-tagline {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 12px;
	padding: 7px 14px;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(168, 85, 247, .16), rgba(34, 211, 238, .1));
	border: 1px solid rgba(168, 85, 247, .32);
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.7;
	color: var(--tmm-text);
}

.tmm-tagline svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	color: var(--tmm-accent-2);
}

/* With one plan there is nothing to choose between, so the radio dot is noise.
   The input stays in the DOM (it is what the form posts) but is not drawn, and
   the row reads as a price panel rather than an option. */
.tmm-plans--single .tmm-plan {
	grid-template-columns: 1fr auto;
	padding: 16px;
	border-color: var(--tmm-accent);
	background: linear-gradient(180deg, rgba(168, 85, 247, .13), rgba(168, 85, 247, .03));
	box-shadow: 0 0 0 1px rgba(168, 85, 247, .3), 0 12px 34px -20px rgba(168, 85, 247, .9);
	cursor: default;
}

.tmm-plans--single .tmm-plan:hover { transform: none; }
.tmm-plans--single .tmm-plan__mark { display: none; }
.tmm-plans--single .tmm-plan__name { font-size: 1rem; }
.tmm-plans--single .tmm-plan__cost b { font-size: 1.34rem; }
.tmm-plans--single .tmm-plan__meta { font-size: .8rem; color: var(--tmm-accent-2); font-weight: 600; }

@media (max-width: 600px) {
	.tmm-tagline { font-size: .75rem; padding: 6px 11px; }
	.tmm-plans--single .tmm-plan { padding: 14px 13px; }
	.tmm-plans--single .tmm-plan__cost b { font-size: 1.2rem; }
}

/* ================================================================
 * Centred header
 *
 * The brand bar and the pitch head read as one centred block: mark,
 * name, tagline, title, subtitle, then the notice. The benefit list
 * below stays start-aligned, because centred body text in Persian is
 * harder to scan line to line.
 * ================================================================ */

.tmm-brandbar {
	justify-content: center;
	gap: 11px;
}

.tmm-pitch__head {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 20px;
}

.tmm-pitch__head h2 {
	margin: 0 0 8px;
	max-width: 24ch;
}

.tmm-pitch__head .tmm-pitch__sub {
	margin: 0;
	max-width: 42ch;
}

/* The tagline is the eyebrow above the title now. */
.tmm-tagline { margin: 0 0 12px; }

/* The notice sits under the pitch rather than above it, so the offer leads
   with what the visitor gets and closes with why they cannot read the page. */
.tmm-notice {
	margin: 16px 0 0;
	text-align: start;
	width: 100%;
}

@media (max-width: 900px) {
	.tmm-pitch__head { margin-bottom: 16px; }
}

@media (max-width: 600px) {
	.tmm-brandbar { gap: 9px; }
	.tmm-pitch__head h2 { max-width: none; }
	.tmm-pitch__head .tmm-pitch__sub { max-width: none; }
}

/* One gateway mark, and a small one: a reassurance beside the line of text,
 * not a logo competing with the site's own.
 *
 * The selector is qualified with .tmm-modal__box on purpose. The blanket
 * `.tmm-modal__box img { height:auto }` further up is *more* specific than a
 * lone class (0,1,1 against 0,1,0), so a bare `.tmm-trust__gateway` rule lost
 * and the SVG rendered at its intrinsic 361×122. Matching that specificity is
 * what makes the size below take effect at all.
 *
 * !important on height as well: this mark must never be able to grow into the
 * layout again if another img rule appears later. */
.tmm-modal__box .tmm-trust__gateway,
.tmm-standalone .tmm-trust__gateway {
	height: 9px !important;
	width: auto !important;
	max-width: 46px;
	background: #fff;
	border-radius: 3px;
	padding: 1px 3px;
	vertical-align: middle;
	flex: 0 0 auto;
}

/* The paybar it used to sit in is gone. */
.tmm-paybar { display: none; }

/* ================================================================
 * Locked page: the offer is part of the page
 *
 * A dialog pinned over a frozen, fully blurred page read to visitors as a
 * scam. On a locked page the dialog is laid into the document instead, at
 * the fold (paywall.js measures .tmm-fold, which the server prints where an
 * article's body starts): the header, title and cover above it stay sharp
 * and usable, everything below fades into the blur, and the offer scrolls
 * with the page like any other part of it.
 * ================================================================ */

.tmm-fold { display: block; height: 0; margin: 0; padding: 0; }

/* The page scrolls; only a dismissible dialog freezes it. */
body.tmm-paywall-lock.tmm-modal-open { overflow: visible; }

.tmm-modal.tmm-modal--locked {
	position: absolute;
	inset: auto 0 auto 0;
	/* Until paywall.js has measured the real fold. */
	top: 55vh;
	/* Under the theme's sticky header (z-index 100), so it stays usable. */
	z-index: 99;
	display: block;
	min-height: 100vh;
	padding: 0 20px 56px;
}

.tmm-modal.tmm-modal--locked[hidden] { display: none; }

/* Fades in over its first stretch, so the sharp part of the page runs
   softly into the blurred part instead of ending at a hard edge. */
.tmm-modal--locked .tmm-modal__backdrop {
	background: rgba(11, 11, 18, .8);
	backdrop-filter: blur(var(--tmm-blur, 7px));
	-webkit-backdrop-filter: blur(var(--tmm-blur, 7px));
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 150px);
	mask-image: linear-gradient(to bottom, transparent 0, #000 150px);
	cursor: default;
	animation: none;
}

/* Full height: the page scrolls now, not the dialog. `overflow: clip` rounds
   the corners without making the box a scroll container, which is what lets
   the sticky buy button below follow the viewport. */
.tmm-modal.tmm-modal--locked .tmm-modal__box {
	margin: 70px auto 0;
	max-height: none;
	overflow: hidden;
	overflow: clip;
}

.tmm-modal--locked .tmm-pane { overflow: visible; }

@media (max-width: 600px) {
	.tmm-modal.tmm-modal--locked { padding: 0 10px 40px; }

	.tmm-modal.tmm-modal--locked .tmm-modal__box {
		margin-top: 50px;
		border: 1px solid var(--tmm-border-strong);
		border-radius: 20px;
	}

	/* A card in the page, not a bottom sheet: no grab handle. */
	.tmm-modal--locked .tmm-brandbar::before { display: none; }
	.tmm-modal--locked .tmm-brandbar { padding-top: 12px; }
}

@media (max-height: 560px) {
	.tmm-modal.tmm-modal--locked .tmm-modal__box { border-radius: 20px; }
}