/**
 * Virtual Pen Pals front-end styles.
 * Self-contained: no external fonts, images, libraries, or trackers.
 */

.vpp, .vpp * { box-sizing: border-box; }

.vpp {
	--ink: #1c2a4a;
	--cream: #fbf6ea;
	--paper: #fffdf6;
	--postal-red: #c0392b;
	--airmail-blue: #1d5c9e;
	--airmail-red: #b03a2e;
	border: 2px dashed var(--airmail-blue);
	background-color: var(--cream);
	background-image:
		repeating-linear-gradient( 90deg, transparent 0 10px, rgba(29, 92, 158, 0.06) 10px 20px ),
		repeating-linear-gradient( 90deg, transparent 0 10px, rgba(176, 58, 46, 0.05) 10px 20px );
	background-position: 0 0, 10px 0;
	background-size: 20px 6px, 20px 6px;
	background-repeat: repeat-x, repeat-x;
	color: var(--ink);
	padding: 24px;
	max-width: 860px;
	margin: 0 auto 2rem;
	border-radius: 6px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
}

.vpp-hero {
	text-align: center;
	padding: 16px 8px 24px;
}
.vpp-hero h1 { margin: 0 0 8px; color: var(--ink); }
.vpp-hero p { max-width: 560px; margin: 0 auto; }

.vpp h2 { color: var(--airmail-blue); border-bottom: 2px solid var(--postal-red); padding-bottom: 4px; }

.vpp-form { background: var(--paper); border: 1px solid #d8cdb4; padding: 16px 18px; margin: 0 0 24px; border-radius: 4px; box-shadow: 0 1px 0 rgba(28, 42, 74, 0.08); }
.vpp-form p { margin: 0 0 12px; }
.vpp-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.vpp-form label input[type="checkbox"] { margin-right: 8px; }
.vpp-form input[type="text"], .vpp-form input[type="email"], .vpp-form input[type="password"], .vpp-form input[type="date"], .vpp-form input[type="number"], .vpp-form select, .vpp-form textarea {
	width: 100%; max-width: 420px; padding: 8px 10px; border: 1px solid #b9ad8f; border-radius: 3px; background: #fff; color: var(--ink); font: inherit;
}
.vpp-hp { position: absolute; left: -9999px; top: -9999px; } /* honeypot */

.vpp-btn {
	display: inline-block; background: var(--postal-red); color: #fff; border: 0; border-radius: 3px;
	padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.vpp-btn:focus-visible { outline: 3px solid var(--airmail-blue); outline-offset: 2px; }
.vpp-btn-sm { padding: 4px 10px; font-size: 0.85rem; }
.vpp-btn-danger { background: #7a2c22; }
.vpp-btn[disabled] { opacity: 0.6; cursor: wait; }

.vpp-msg { min-height: 1.4em; font-weight: 600; }
.vpp-msg.is-err { color: #8e2418; }
.vpp-msg.is-ok { color: #1d5c9e; }
.vpp-warn { background: #fff3cd; border: 1px solid #e0c96f; padding: 10px 12px; border-radius: 4px; }
.vpp-ok { color: #1d5c9e; font-weight: 600; }
.vpp-fineprint { font-size: 0.85rem; color: #5a5342; }
.vpp-count { font-size: 0.8rem; color: #5a5342; }

/* Tabs */
.vpp-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; border-bottom: 3px solid var(--airmail-blue); padding-bottom: 0; }
.vpp-tab {
	display: inline-block; padding: 10px 16px; text-decoration: none; color: var(--ink);
	background: #efe6d2; border: 1px solid #d8cdb4; border-bottom: 0; border-radius: 6px 6px 0 0; font-weight: 600;
}
.vpp-tab.is-on { background: var(--paper); color: var(--postal-red); box-shadow: inset 0 -3px 0 var(--postal-red); }
.vpp-tab:focus-visible { outline: 3px solid var(--airmail-blue); outline-offset: -3px; }
.vpp-panel { display: none; }
.vpp-panel.is-on { display: block; }

/* Directory cards */
.vpp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.vpp-card {
	background: var(--paper); border: 1px solid #d8cdb4; border-radius: 4px; padding: 14px 16px;
	box-shadow: 3px 3px 0 rgba(29, 92, 158, 0.12);
	background-image: repeating-linear-gradient( 90deg, transparent 0 8px, rgba(176, 58, 46, 0.08) 8px 16px );
	background-size: 100% 5px; background-repeat: no-repeat; background-position: top;
	padding-top: 18px;
}
.vpp-card h3 { margin: 0 0 4px; }
.vpp-loc { font-size: 0.9rem; color: #5a5342; }
.vpp-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.vpp-badge { display: inline-block; background: #efe6d2; border: 1px solid #d8cdb4; padding: 1px 8px; border-radius: 10px; font-size: 0.78rem; }
.vpp-badge-ok { background: #d9ead9; border-color: #8fb98f; }
.vpp-badge-new { background: var(--postal-red); color: #fff; border-color: var(--postal-red); font-weight: 700; }
.vpp-empty { color: #5a5342; font-style: italic; }

/* Mailbox letters */
.vpp-letter { background: var(--paper); border: 1px solid #d8cdb4; border-left: 6px solid var(--airmail-blue); border-radius: 4px; padding: 12px 14px; margin-bottom: 10px; }
.vpp-letter.is-unread { border-left-color: var(--postal-red); background: #fff9ec; }
.vpp-letter-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vpp-letter-head strong { color: var(--airmail-blue); }
.vpp-letter-head time { font-size: 0.85rem; color: #5a5342; margin-left: auto; }
.vpp-letter-body { margin-top: 10px; padding: 12px; background: #fffef9; border: 1px dashed #d8cdb4; white-space: normal; }
.vpp-travel, .vpp-sentline { background: #f4ecd9; border: 1px dashed #b9ad8f; padding: 8px 12px; border-radius: 4px; margin-bottom: 6px; }
.vpp-seal { display: inline-block; background: var(--postal-red); color: #fff; font-size: 0.75rem; padding: 2px 8px; border-radius: 2px; }

/* Envelope animation: paper -> fold -> into envelope -> flap closes -> stamp -> sent away. ~3.6s total. */
.vpp-anim { position: relative; height: 220px; margin: 24px auto; max-width: 380px; }
.vpp-anim .vpp-paper {
	position: absolute; left: 50%; top: 10px; width: 150px; height: 90px; margin-left: -75px;
	background: #fffef9; border: 1px solid #d8cdb4; z-index: 2;
	animation: vpp-fold 3.6s ease-in-out forwards;
}
.vpp-anim .vpp-env {
	position: absolute; left: 50%; top: 70px; width: 220px; height: 130px; margin-left: -110px;
	background: var(--paper); border: 1px solid #c9b98f; border-radius: 4px; overflow: hidden; z-index: 1;
	background-image: linear-gradient( 135deg, transparent 47%, rgba(176, 58, 46, 0.25) 47% 53%, transparent 53% ),
		linear-gradient( 45deg, transparent 47%, rgba(29, 92, 158, 0.25) 47% 53%, transparent 53% );
	animation: vpp-send 3.6s ease-in forwards;
}
.vpp-anim .vpp-flap {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3;
	background: linear-gradient( to bottom, rgba(232, 222, 196, 0.97), rgba(232, 222, 196, 0.82) );
	clip-path: polygon( 0 0, 50% 62%, 100% 0 );
	transform-origin: top center; transform: scaleY(0.2);
	animation: vpp-flap 3.6s ease-in forwards;
}
.vpp-anim .vpp-stamp {
	position: absolute; right: 14px; top: 12px; width: 34px; height: 40px; z-index: 4;
	background: var(--airmail-blue);
	border: 3px dashed rgba(255, 255, 255, 0.85);
	opacity: 0;
	animation: vpp-stamp 3.6s ease-in forwards;
}
@keyframes vpp-fold {
	0% { transform: translateY(0) scaleY(1); }
	22% { transform: translateY(30px) scaleY(0.55); }    /* fold */
	38% { transform: translateY(90px) scaleY(0.4); opacity: 0; } /* slide into envelope */
	100% { opacity: 0; }
}
@keyframes vpp-send {
	0%, 58% { transform: translate(0, 0) rotate(0deg); }   /* flap closing */
	100% { transform: translate(180px, -120px) rotate(12deg); opacity: 0; } /* sent away */
}
@keyframes vpp-flap {
	0%, 30% { transform: scaleY(1); }
	42%, 100% { transform: scaleY(0.2); }
}
@keyframes vpp-stamp {
	0%, 60% { opacity: 0; transform: scale(1.6); }
	72%, 100% { opacity: 1; transform: scale(1); }
}

.vpp-result-ok { background: #eaf4e8; border: 1px solid #8fb98f; padding: 10px 12px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
	.vpp-anim .vpp-paper, .vpp-anim .vpp-env, .vpp-anim .vpp-flap, .vpp-anim .vpp-stamp { animation: none; }
	.vpp-anim { display: none; }
	.vpp-tab { transition: none; }
}
@media (max-width: 640px) {
	.vpp { padding: 14px; }
	.vpp-letter-head time { margin-left: 0; width: 100%; }
}