/* JL Planners — Invitation Text Planner ("Teksty na zaproszenia")
 * Mobile-first, romantic / premium Polish-wedding styling. Builds on the foundation's
 * jlp-shell primitives (.jlp-field, .jlp-input, .jlp-btn, .jlp-notice). */

.jlp-itp {
	--itp-gold: var(--jlp-gold);
	--itp-gold-dark: var(--jlp-gold-deep);
	--itp-ink: var(--jlp-ink);
	--itp-muted: var(--jlp-ink-soft);
	--itp-faint: var(--jlp-ink-mute);
	--itp-paper: var(--jlp-surface-2);
	--itp-line: var(--jlp-line);
	--itp-soft: var(--jlp-bg-deep);
	display: flex;
	flex-direction: column;
	gap: 18px;
	color: var(--itp-ink);
}

.jlp-itp-h2 {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.55rem;
	font-weight: 500;
	margin: 0 0 14px;
	color: var(--itp-ink);
	letter-spacing: .01em;
}

.jlp-itp-hint,
.jlp-itp-genbar__hint {
	font-family: "Manrope", system-ui, sans-serif;
	font-size: .86rem;
	color: var(--itp-muted);
	margin: 12px 0 0;
	line-height: 1.5;
}

/* ---- cards ---- */
.jlp-itp-card {
	background: var(--itp-paper);
	border: 1px solid var(--itp-line);
	border-radius: 14px;
	padding: 20px 18px;
	box-shadow: 0 18px 40px -34px rgba(42, 31, 26, .35);
}

@media (min-width: 720px) {
	.jlp-itp-card { padding: 26px 28px; }
	.jlp-itp-h2 { font-size: 1.8rem; }
}

/* ---- locked banner (free preview) ---- */
.jlp-itp-locked {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	background: linear-gradient(135deg, var(--itp-soft), var(--jlp-surface));
	border: 1px solid var(--itp-gold);
	border-radius: 14px;
	padding: 16px 18px;
}
.jlp-itp-locked__icon { display: inline-flex; flex: 0 0 auto; color: var(--jlp-gold-deep); line-height: 1; }
.jlp-itp-locked__text {
	flex: 1 1 240px;
	margin: 0;
	font-family: "Manrope", system-ui, sans-serif;
	font-size: .92rem;
	color: var(--itp-muted);
	line-height: 1.5;
}

/* ---- input grid ---- */
.jlp-itp-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
@media (min-width: 600px) {
	.jlp-itp-grid { grid-template-columns: 1fr 1fr; }
	.jlp-itp-field--wide { grid-column: 1 / -1; }
}
.jlp-itp .jlp-field { margin: 0; }
.jlp-itp .jlp-field__label {
	font-family: "Manrope", system-ui, sans-serif;
	font-size: .82rem;
	font-weight: 600;
	color: var(--itp-muted);
	letter-spacing: .01em;
}
.jlp-itp-req { color: var(--itp-gold-dark); }
.jlp-itp .jlp-input {
	font-family: "Manrope", system-ui, sans-serif;
}
.jlp-itp textarea.jlp-input { line-height: 1.5; }
.jlp-itp-dress-custom[hidden] { display: none; }

/* ---- style picker ---- */
.jlp-itp-styles {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}
@media (min-width: 560px) { .jlp-itp-styles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .jlp-itp-styles { grid-template-columns: 1fr 1fr 1fr; } }

.jlp-itp-style {
	position: relative;
	display: block;
	border: 1px solid var(--itp-line);
	border-radius: 12px;
	padding: 14px 14px 14px 40px;
	cursor: pointer;
	background: var(--jlp-surface);
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.jlp-itp-style:hover { border-color: var(--itp-gold); }
.jlp-itp-style.is-selected {
	border-color: var(--itp-gold);
	background: var(--itp-soft);
	box-shadow: 0 0 0 1px var(--itp-gold) inset;
}
.jlp-itp-style__input {
	position: absolute;
	left: 14px;
	top: 16px;
	margin: 0;
	accent-color: var(--itp-gold-dark);
}
.jlp-itp-style__name {
	display: block;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.18rem;
	font-weight: 600;
	color: var(--itp-ink);
}
.jlp-itp-style__desc {
	display: block;
	margin-top: 4px;
	font-family: "Manrope", system-ui, sans-serif;
	font-size: .82rem;
	color: var(--itp-muted);
	line-height: 1.45;
}
.jlp-itp[data-readonly="1"] .jlp-itp-style { cursor: default; }

/* ---- generate bar ---- */
.jlp-itp-genbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 16px;
}
.jlp-itp-genbar__hint { margin: 0; flex: 1 1 220px; }
.jlp-itp-generate.is-busy { opacity: .7; pointer-events: none; }

/* sticky generate bar on small screens */
@media (max-width: 719px) {
	.jlp-itp-genbar {
		position: sticky;
		bottom: 0;
		z-index: 5;
		margin: 16px -18px -20px;
		padding: 12px 18px;
		background: rgba(255, 253, 250, .96);
		backdrop-filter: blur(6px);
		border-top: 1px solid var(--itp-line);
	}
	.jlp-itp-genbar .jlp-btn { flex: 1 1 100%; }
}

/* ---- progress ---- */
.jlp-itp-progress__bar {
	height: 8px;
	border-radius: 999px;
	background: var(--itp-soft);
	overflow: hidden;
	border: 1px solid var(--itp-line);
}
.jlp-itp-progress__bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--itp-gold), var(--itp-gold-dark));
	transition: width .25s ease;
}
.jlp-itp-progress__pct {
	font-family: "Manrope", system-ui, sans-serif;
	font-size: .82rem;
	font-weight: 600;
	color: var(--itp-muted);
	margin: 8px 0 12px;
}
.jlp-itp-progress .jlp-notice { margin: 0 0 12px; }
.jlp-itp-progress__next {
	font-family: "Manrope", system-ui, sans-serif;
	font-size: .92rem;
	color: var(--itp-ink);
	margin: 0;
}

/* ---- text blocks ---- */
.jlp-itp-blocks__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}
.jlp-itp-blocks__head .jlp-itp-h2 { margin: 0; }

.jlp-itp-block {
	border-top: 1px dotted var(--itp-line);
	padding-top: 16px;
	margin-top: 16px;
}
.jlp-itp-block:first-of-type { border-top: 0; padding-top: 0; margin-top: 14px; }

.jlp-itp-block__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}
.jlp-itp-block__title {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.22rem;
	font-weight: 600;
	color: var(--itp-gold-dark);
}
.jlp-itp-ta {
	width: 100%;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.06rem;
	line-height: 1.6;
	color: var(--itp-ink);
	resize: vertical;
}
.jlp-itp-block[data-itp-block="sms"] .jlp-itp-ta { font-size: 1rem; }

.jlp-itp-block__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0 0;
	font-family: "Manrope", system-ui, sans-serif;
	font-size: .76rem;
	color: var(--itp-faint);
}
.jlp-itp-block__count.is-over { color: #c0392b; font-weight: 700; }
.jlp-itp-block__edited { color: var(--itp-gold-dark); font-style: italic; }

/* copy buttons */
.jlp-itp-copy,
.jlp-itp-copyall {
	font-family: "Manrope", system-ui, sans-serif;
	font-size: .78rem;
	font-weight: 600;
	border: 1px solid var(--itp-line);
	background: var(--jlp-surface);
	color: var(--itp-muted);
	border-radius: 999px;
	padding: 5px 14px;
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}
.jlp-itp-copy svg,
.jlp-itp-copyall svg { vertical-align: -0.12em; }
.jlp-itp-copy:hover,
.jlp-itp-copyall:hover { border-color: var(--itp-gold); color: var(--itp-gold-dark); }
.jlp-itp-copy.is-done,
.jlp-itp-copyall.is-done {
	border-color: var(--itp-gold-dark);
	background: var(--itp-soft);
	color: var(--itp-gold-dark);
}
.jlp-itp-copy--locked,
.jlp-itp-copyall--locked { cursor: pointer; }

/* ---- version history ---- */
.jlp-itp-history__rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}
.jlp-itp-hrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	border: 1px solid var(--itp-line);
	border-radius: 10px;
	padding: 10px 12px;
	background: var(--jlp-surface);
}
.jlp-itp-hrow__meta {
	font-family: "Manrope", system-ui, sans-serif;
	font-size: .85rem;
	color: var(--itp-ink);
}
.jlp-itp-hrow__style { font-weight: 600; }
.jlp-itp-hrow__when { color: var(--itp-faint); margin-left: 6px; }
.jlp-itp-hrow__actions { display: flex; align-items: center; gap: 8px; }
.jlp-itp-hrow__del {
	border: 0;
	background: transparent;
	color: var(--itp-faint);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 6px;
}
.jlp-itp-hrow__del:hover { color: #c0392b; background: #fdecea; }
.jlp-itp-history__empty {
	font-family: "Manrope", system-ui, sans-serif;
	font-size: .86rem;
	color: var(--itp-faint);
	margin: 12px 0 0;
}
.jlp-itp-history__empty[hidden] { display: none; }

/* ---- marketing / public page ---- */
.jlp-itp-public { font-family: "Manrope", system-ui, sans-serif; }
.jlp-itp-public__perks { margin: 14px 0 0; padding-left: 20px; }
.jlp-itp-public__perks li { margin: 6px 0; }
.jlp-itp-public__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 22px 0;
}
@media (min-width: 640px) { .jlp-itp-public__cols { grid-template-columns: 1fr 1fr; } }
.jlp-itp-public__box {
	background: var(--itp-soft);
	border: 1px solid var(--itp-line);
	border-radius: 12px;
	padding: 16px 18px;
}
.jlp-itp-public__box ol,
.jlp-itp-public__box ul { margin: 8px 0 0; padding-left: 18px; }
.jlp-itp-public__box li { margin: 5px 0; }
.jlp-itp-public__cta {
	font-style: italic;
	color: var(--itp-muted);
	border-top: 1px solid var(--itp-line);
	padding-top: 16px;
}