:root{
	--bg: #f6f7f9;
	--card: #ffffff;
	--muted: #4b5563;
	--accent: #6b7cff;
	--accent-2: #f08a5d;
	--content-width: 560px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background:var(--bg);
	color:#111827;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

.container{
	max-width:1100px;
	margin:2rem auto;
	padding:1rem;
}

/* HERO / IMAGE */
.hero{margin-bottom:1.5rem}
.media-wrap{
	width:100%;
	max-width:var(--content-width);
	margin:0 auto;
	border-radius:14px;
	overflow:hidden;
	background:linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
	box-shadow:0 8px 30px rgba(16,24,40,0.06);
}
.hero-image{
	display:block;
	width:100%;
	height:auto;
	object-fit:contain;
	max-height:80vh; /* keep image fully visible and avoid huge tall images */
}

/* RSVP section */
.rsvp{display:flex;flex-direction:column;align-items:center;gap:1rem}
.rsvp h2{margin:0 0 0.25rem 0;font-size:1.25rem;color:var(--muted)}

.form{
	width:100%;
	max-width:var(--content-width);
	background:var(--card);
	padding:1.25rem;
	border-radius:12px;
	box-shadow:0 10px 30px rgba(16,24,40,0.06);
	margin:0 auto;
}

.form label{display:block;font-weight:600;color:#374151;margin-bottom:0.4rem}
.form input[type="text"],
.form input[type="email"],
.form input[type="number"],
.form textarea{
	width:100%;
	padding:0.75rem 0.9rem;
	border:1px solid #e6e9ef;
	border-radius:10px;
	background:#ffffff;
	font-size:1rem;
	color:#0f172a;
	margin-bottom:0.9rem;
}

/* inline error styles */
.is-invalid{
	border-color:var(--accent-2) !important;
	box-shadow:0 6px 20px rgba(240,138,93,0.12) !important;
}
.form small.error-text{display:block;color:var(--accent-2);font-size:0.875rem;margin-top:-0.5rem;margin-bottom:0.6rem}
fieldset.is-invalid{outline:2px solid rgba(240,138,93,0.12);border-radius:8px;padding:0.5rem}

/* Improved fieldset/card styling (responsive and touch-friendly) */
fieldset{
	border:1px solid rgba(99,102,241,0.06);
	background:linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
	padding:0.75rem;
	margin:0 0 1rem;
	border-radius:12px;
	display:flex;
	flex-direction:row;
	gap:1rem;
	align-items:center;
	flex-wrap:wrap;
}

fieldset legend{
	width:100%;
	margin:0 0 0.375rem 0;
	padding:0 0.25rem;
	font-weight:700;
	color:#374151;
	font-size:0.95rem;
}

fieldset label{
	font-weight:600;
	color:#374151;
	display:flex;
	align-items:center;
	gap:0.6rem;
	flex:1 1 1px;
	min-width:0;
}

fieldset input[type="radio"]{width:auto;height:auto}

@media (max-width:520px){
	fieldset{
		flex-direction:column;
		align-items:stretch;
		padding:0.9rem;
	}
	fieldset label{width:100%}
	fieldset legend{font-size:0.95rem;margin-bottom:0.5rem}
}

.btn{
	display:inline-flex;align-items:center;gap:0.6rem;padding:0.7rem 1rem;background:var(--accent);color:#fff;border:0;border-radius:10px;cursor:pointer;font-weight:700;letter-spacing:0.2px;box-shadow:0 8px 24px rgba(107,124,255,0.12);transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(107,124,255,0.14)}

.spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,0.35);border-top-color:rgba(255,255,255,0.95);display:inline-block}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

/* Modal (simple styling) */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.45);padding:1rem}
.modal[aria-hidden="false"]{display:flex}
.modal-panel{background:var(--card);padding:1.25rem;border-radius:12px;max-width:480px;box-shadow:0 18px 50px rgba(2,6,23,0.32)}

@media (min-width:768px){
	.container{padding:1.5rem}
	.hero{margin-bottom:2rem}
	.form{padding:1.5rem}
	/* increase content width a bit on larger screens */
	:root{ --content-width: 720px }
}

@keyframes spin{to{transform:rotate(360deg)}}