/* PubVite invitation styles. Every color and font comes from CSS custom properties set per event. */
.pubtly-invite {
	--pubtly-bg: #f3f3f3; --pubtly-card: #fff; --pubtly-text: #1d1d1d; --pubtly-accent: #1d1d1d; --pubtly-accent-text: #fff;
	--pubtly-font-heading: system-ui, sans-serif; --pubtly-font-body: system-ui, sans-serif;
	box-sizing: border-box; width: 100%; padding: clamp(12px, 4vw, 32px);
	background-color: var(--pubtly-bg); background-image: var(--pubtly-bg-image, none); background-size: cover; background-position: center;
	color: var(--pubtly-text); font-family: var(--pubtly-font-body); line-height: 1.55;
}
.pubtly-invite *, .pubtly-invite *::before, .pubtly-invite *::after { box-sizing: border-box; }
.pubtly-hero { max-width: 680px; margin: 0 auto; }
.pubtly-hero img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: cover; border-radius: 10px 10px 0 0; }
.pubtly-card {
	max-width: 680px; margin: 0 auto; padding: clamp(16px, 4vw, 32px);
	background: var(--pubtly-card); color: var(--pubtly-text); border-radius: 10px; box-shadow: 0 2px 14px rgba(0, 0, 0, .12);
}
.pubtly-hero + .pubtly-card { border-radius: 0 0 10px 10px; }
.pubtly-invite h1, .pubtly-invite h2, .pubtly-invite h3, .pubtly-title { font-family: var(--pubtly-font-heading); color: var(--pubtly-text); line-height: 1.2; }
.pubtly-title { margin-top: 0; font-size: clamp(1.6rem, 6vw, 2.4rem); }
.pubtly-invite a { color: var(--pubtly-accent); }
.pubtly-invite .pubtly-when, .pubtly-invite .pubtly-where { margin: .25em 0; font-size: 1.05em; }

/* Forms */
.pubtly-invite form { margin: 1.25em 0; }
.pubtly-invite label { display: inline-block; margin-bottom: .35em; }
.pubtly-invite input[type="text"], .pubtly-invite input[type="email"], .pubtly-invite input[type="number"], .pubtly-invite select, .pubtly-invite textarea {
	max-width: 100%; padding: .5em .6em; border: 1px solid color-mix(in srgb, var(--pubtly-text) 35%, transparent); border-radius: 6px;
	background: var(--pubtly-card); color: var(--pubtly-text); font: inherit;
}
.pubtly-invite button {
	padding: .6em 1.3em; border: 0; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 600;
	background: var(--pubtly-accent); color: var(--pubtly-accent-text);
}
.pubtly-invite button:hover { filter: brightness(1.1); }
.pubtly-invite button:focus-visible, .pubtly-invite input:focus-visible, .pubtly-invite select:focus-visible, .pubtly-invite textarea:focus-visible { outline: 3px solid var(--pubtly-accent); outline-offset: 2px; }
.pubtly-error { padding: .6em .8em; border-left: 4px solid #b3261e; background: color-mix(in srgb, #b3261e 12%, var(--pubtly-card)); }
.pubtly-thanks { padding: .6em .8em; border-left: 4px solid var(--pubtly-accent); background: color-mix(in srgb, var(--pubtly-accent) 12%, var(--pubtly-card)); }
.pubtly-forget small { opacity: .75; }
.pubtly-logo-wrap { text-align: center; margin: 0 0 1em; }
.pubtly-logo { max-height: 90px; width: auto; max-width: 100%; height: auto; }
.pubtly-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; list-style: none; margin: 1.25em 0; padding: 0; }
.pubtly-gallery li { margin: 0; }
.pubtly-gallery-image { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 6px; }
.pubtly-public-details { margin: 1.5em 0; padding: 1em 1.25em; border: 1px solid rgba(0, 0, 0, .15); border-radius: 8px; }
.pubtly-public-details .pubtly-logo { display: block; margin: 0 auto 1em; }
.pubtly-powered { margin: 1.5em 0 0; text-align: center; opacity: .7; }

/* Per-template character */
.pubtly-tpl-birthday-confetti .pubtly-card { border: 3px dashed var(--pubtly-accent); }
.pubtly-tpl-birthday-night .pubtly-card { box-shadow: 0 0 0 2px var(--pubtly-accent), 0 4px 24px rgba(0, 0, 0, .5); }
.pubtly-tpl-wedding-classic .pubtly-card, .pubtly-tpl-wedding-blush .pubtly-card { border: 1px solid var(--pubtly-accent); outline: 1px solid var(--pubtly-accent); outline-offset: -8px; text-align: center; }
.pubtly-tpl-wedding-classic .pubtly-title, .pubtly-tpl-wedding-blush .pubtly-title { font-weight: 400; letter-spacing: .04em; }
.pubtly-tpl-corporate-clean .pubtly-card, .pubtly-tpl-corporate-dark .pubtly-card { border-radius: 2px; border-left: 6px solid var(--pubtly-accent); }
.pubtly-tpl-casual-bbq .pubtly-card { border-radius: 18px; }
.pubtly-tpl-holiday-cozy .pubtly-card { border-top: 6px double var(--pubtly-accent); }
.pubtly-tpl-minimal .pubtly-card { box-shadow: none; border: 1px solid color-mix(in srgb, var(--pubtly-text) 20%, transparent); }

@media (max-width: 480px) {
	.pubtly-invite input[type="text"], .pubtly-invite input[type="email"], .pubtly-invite select, .pubtly-invite textarea { width: 100%; }
}