/* LS Paywall — paywall.css
   Namespaced with .lsp- to avoid theme conflicts.
   Supports dark mode via prefers-color-scheme.
   No external dependencies.
*/

/* ── Honeypot — must be visually hidden but not display:none (some bots detect that) ── */
.lsp-hp {
	position: absolute;
	left:    -9999px;
	top:     -9999px;
	width:   1px;
	height:  1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	tab-index: -1;
}

/* ── Gate wrapper ──────────────────────────────────────────────────────────── */

.lsp-gate {
	position:      relative;
	border-radius: 10px;
	overflow:      hidden;
	margin:        1.75em 0;
	/* Subtle border so it reads as a distinct content block */
	box-shadow:    0 0 0 1px rgba(0,0,0,0.08), 0 2px 12px rgba(0,0,0,0.06);
}

/* Tier 1 accent — left border in neutral dark */
.lsp-gate--tier1 {
	border-left: 3px solid #1a1a1a;
}

/* Tier 2 accent — left border in brand amber */
.lsp-gate--tier2 {
	border-left: 3px solid #f5a623;
}

@media (prefers-color-scheme: dark) {
	.lsp-gate--tier1 { border-left-color: #e5e5e5; }
}

/* ── Blurred content preview ───────────────────────────────────────────────── */

.lsp-gate__preview {
	padding:     1.25em 1.5em 2em;
	font-size:   0.95em;
	line-height: 1.7;
	color:       currentColor;

	/* Fade to transparent so it's clear there's more below */
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 75%);
	        mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 75%);
	user-select:   none;
	pointer-events: none;
}

/* ── Overlay ───────────────────────────────────────────────────────────────── */

.lsp-gate__overlay {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      linear-gradient(
		to bottom,
		transparent 0%,
		rgba(255,255,255,0.88) 30%,
		rgba(255,255,255,0.98) 100%
	);
	padding: 1em;
}

@media (prefers-color-scheme: dark) {
	.lsp-gate__overlay {
		background: linear-gradient(
			to bottom,
			transparent 0%,
			rgba(18,18,18,0.88) 30%,
			rgba(18,18,18,0.98) 100%
		);
	}
}

/* ── Box (centred content inside overlay) ──────────────────────────────────── */

.lsp-gate__box {
	text-align: center;
	padding:    1.5em 2em 2em;
	max-width:  460px;
	width:      100%;
}

/* Tier label pill */
.lsp-gate__tier-label {
	display:         inline-block;
	font-size:       0.7em;
	font-weight:     700;
	text-transform:  uppercase;
	letter-spacing:  0.08em;
	padding:         0.25em 0.75em;
	border-radius:   999px;
	background:      #f0f0f0;
	color:           #444;
	margin-bottom:   0.75em;
}

.lsp-gate__tier-label--paid {
	background: #fff3cd;
	color:      #7a4f00;
}

@media (prefers-color-scheme: dark) {
	.lsp-gate__tier-label       { background: #2a2a2a; color: #ccc; }
	.lsp-gate__tier-label--paid { background: #3d2e00; color: #ffd87a; }
}

/* Gate message */
.lsp-gate__message {
	margin:      0 0 1.25em;
	font-size:   0.95em;
	line-height: 1.65;
	opacity:     0.85;
}

/* Prerequisite note (shown in Tier 2 gate for logged-out users) */
.lsp-gate__prereq {
	font-size:   0.82em;
	opacity:     0.6;
	margin:      0 0 0.75em;
}

/* Error from lsp_status query param (expired/invalid link) */
.lsp-gate__status-error {
	color:         #c0392b;
	font-size:     0.85em;
	margin-bottom: 0.75em;
}

/* Inline API error */
.lsp-gate__error {
	color:      #c0392b;
	font-size:  0.85em;
	margin-top: 0.5em;
}

/* ── Email input row ───────────────────────────────────────────────────────── */

.lsp-gate__input-row {
	display:   flex;
	gap:       0.5em;
	flex-wrap: wrap;
}

.lsp-gate__email-input {
	flex:          1 1 200px;
	min-width:     0;
	padding:       0.55em 0.85em;
	border:        1px solid #ccc;
	border-radius: 6px;
	font-size:     0.9em;
	line-height:   1.4;
	background:    #fff;
	color:         #111;
	transition:    border-color 0.15s ease, box-shadow 0.15s ease;
}

.lsp-gate__email-input:focus {
	outline:      none;
	border-color: #1a1a1a;
	box-shadow:   0 0 0 2px rgba(26,26,26,0.12);
}

@media (prefers-color-scheme: dark) {
	.lsp-gate__email-input {
		background:   #1e1e1e;
		border-color: #444;
		color:        #eee;
	}
	.lsp-gate__email-input:focus {
		border-color: #aaa;
		box-shadow:   0 0 0 2px rgba(180,180,180,0.15);
	}
}

/* Fine print below email row */
.lsp-gate__fine-print {
	font-size:  0.78em;
	opacity:    0.55;
	margin-top: 0.5em;
}

/* ── Confirmation state ────────────────────────────────────────────────────── */

.lsp-gate__confirm-wrap {
	padding: 0.5em 0;
}

.lsp-gate__confirm-icon {
	font-size:     2em;
	display:       block;
	margin-bottom: 0.35em;
	line-height:   1;
}

.lsp-gate__confirm-heading {
	font-size:     1.1em;
	font-weight:   700;
	margin:        0 0 0.4em;
}

.lsp-gate__confirm-sub {
	font-size:    0.9em;
	opacity:      0.75;
	margin:       0 0 1em;
	line-height:  1.55;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.lsp-btn {
	display:         inline-block;
	padding:         0.55em 1.3em;
	border-radius:   6px;
	font-size:       0.9em;
	font-weight:     600;
	text-decoration: none;
	cursor:          pointer;
	transition:      opacity 0.15s ease, transform 0.1s ease;
	line-height:     1.4;
	white-space:     nowrap;
	border:          none;
}

.lsp-btn:hover {
	opacity:         0.85;
	transform:       translateY(-1px);
	text-decoration: none;
}

.lsp-btn:active {
	transform: translateY(0);
	opacity:   1;
}

.lsp-btn--primary {
	background: #1a1a1a;
	color:      #fff;
}

.lsp-btn--primary:hover {
	color: #fff;
}

.lsp-gate--tier2 .lsp-btn--primary {
	background: #f5a623;
	color:      #1a1a1a;
}

.lsp-btn--secondary {
	background: transparent;
	color:      currentColor;
	border:     1.5px solid currentColor;
	opacity:    0.65;
}

.lsp-btn--secondary:hover {
	opacity: 1;
}

.lsp-btn--large {
	padding:   0.75em 1.75em;
	font-size: 1em;
}

@media (prefers-color-scheme: dark) {
	.lsp-btn--primary {
		background: #e5e5e5;
		color:      #111;
	}
	.lsp-gate--tier2 .lsp-btn--primary {
		background: #f5a623;
		color:      #111;
	}
}

/* ── Unlocked content ──────────────────────────────────────────────────────── */

.lsp-content--unlocked {
	/* Intentionally unstyled — inherits theme styles */
}

/* ── Account shortcode ─────────────────────────────────────────────────────── */

.lsp-account {
	display:     flex;
	align-items: center;
	gap:         0.75em;
	flex-wrap:   wrap;
	padding:     0.5em 0;
}

.lsp-account__email {
	font-size:    0.85em;
	opacity:      0.6;
	margin:       0;
	font-weight:  500;
}

.lsp-account__logout {
	font-size:    0.8em;
	opacity:      0.5;
	margin-left:  auto;
}

.lsp-account__logout:hover {
	opacity: 0.9;
}

/* Badges */
.lsp-badge {
	display:        inline-block;
	padding:        0.25em 0.75em;
	border-radius:  999px;
	font-size:      0.75em;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.lsp-badge--tier1   { background: #f0f0f0; color: #444; }
.lsp-badge--tier2   { background: #fff3cd; color: #7a4f00; }
.lsp-badge--warn    { background: #ffe0e0; color: #7a0000; }

@media (prefers-color-scheme: dark) {
	.lsp-badge--tier1 { background: #2a2a2a; color: #ccc; }
	.lsp-badge--tier2 { background: #3d2e00; color: #ffd87a; }
	.lsp-badge--warn  { background: #3d0000; color: #ffaaaa; }
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media ( max-width: 520px ) {
	.lsp-gate__box {
		padding: 1em 1em 1.5em;
	}

	.lsp-gate__input-row {
		flex-direction: column;
	}

	.lsp-gate__email-input,
	.lsp-btn {
		width: 100%;
		text-align: center;
	}
}