/* !important throughout this rule: the button is a plain <button> element,
   and at least one host theme (Hello Elementor's base stylesheet) has its
   own global `button { color, background, border }` reset that loads after
   this file. That rule is only element-specificity (lower than our class
   selector) so it shouldn't normally win — but something in this stack
   (page-optimization/critical-CSS plugin, or a proxy-level CSS rewrite) has
   been observed overriding it in production anyway. !important guarantees
   our own button never silently reverts to the theme's default look,
   regardless of what's fighting it upstream. */
.me-rsvp-open-modal {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 12px 20px !important;
	background: #F57B34 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	cursor: pointer !important;
	text-decoration: none !important;
}

.me-rsvp-open-modal:hover,
.me-rsvp-open-modal:focus {
	background: #db6a28 !important;
	color: #fff !important;
}

.me-rsvp-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 20px;
	box-sizing: border-box;
}

.me-rsvp-modal-overlay[hidden] {
	display: none;
}

/* A column flexbox split into a fixed header and a scrolling embed area
   (below), rather than one padded box that scrolls as a whole — that older
   layout is what produced two stacked scrollbars whenever the embed itself
   was tall enough to scroll internally (the modal's own, wrapping the
   embed's own). Only .me-rsvp-embed-wrap scrolls now, so there's at most
   one. overflow:hidden here (not auto) is what lets the rounded corners
   below actually clip the embed instead of it visibly overhanging them. */
.me-rsvp-modal {
	background: #fff;
	border-radius: 14px;
	max-width: 700px; /* wide enough for a Google Form's default 640px embed width plus padding */
	width: 100%;
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.me-rsvp-modal-header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex: 0 0 auto;
	padding: 20px 20px 16px 28px;
	border-bottom: 1px solid #f0f0f0;
}

.me-rsvp-modal h2 {
	flex: 1 1 auto;
	margin: 0;
	padding-top: 6px; /* optically centers against the larger close button */
	font-size: 20px;
	line-height: 1.35;
}

/* width/height is the click target (44px meets the accessible touch-target
   minimum); font-size is the visual glyph and is deliberately larger than
   what "fits neatly" in that box would suggest — a small × here reads as
   fiddly/unsure of itself, which is exactly what threw a user off before. */
.me-rsvp-modal-close {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: none !important;
	border: none !important;
	border-radius: 50%;
	font-size: 34px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	color: #444 !important;
	transition: background-color 120ms ease;
}

.me-rsvp-modal-close:hover,
.me-rsvp-modal-close:focus-visible {
	background: #f2f2f2 !important;
}

/* The embed is whatever HTML the admin pasted in (typically a Google Form
   iframe) — this is the only part of the modal that scrolls, and it's the
   only part that touches the embed's own edges (no surrounding padding),
   so the form reads as part of the modal rather than a box pasted inside
   another box. width:100% !important (not just max-width) overrides
   whatever fixed pixel width the pasted snippet hard-codes, so it actually
   fills — and shrinks with — the modal instead of leaving dead space or
   forcing a horizontal scrollbar on a narrow screen. */
.me-rsvp-embed-wrap {
	flex: 1 1 auto;
	min-height: 0; /* required for a flex child to actually be allowed to scroll instead of stretching the modal past max-height */
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

.me-rsvp-embed-wrap iframe {
	display: block;
	width: 100% !important;
	max-width: 100%;
	border: 0 !important;
}

/* Responsive — phones and small tablets. Modal allowed to use nearly the
   full viewport so a tall embedded form has room to scroll internally. */
@media (max-width: 600px) {
	.me-rsvp-modal-overlay {
		padding: 0;
		align-items: flex-end;
	}

	.me-rsvp-modal {
		max-width: 100%;
		width: 100%;
		max-height: 95vh;
		border-radius: 16px 16px 0 0;
	}

	.me-rsvp-modal-header {
		padding: 18px 16px 14px 20px;
	}

	.me-rsvp-modal h2 {
		font-size: 18px;
	}

	.me-rsvp-open-modal {
		font-size: 15px;
	}
}