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

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

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

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