/* Bangchak RSVP — frontend */
.bcrsvp-wrap {
	--bc-green: #0e5c3a;
	--bc-green-dark: #1F2937;
	--bc-green-soft: #1a6b47;
	--bc-gold: #d4a017;
	--bc-ink: #24352c;
	--bc-muted: #3C5566;
	--bc-line: #e4e9e6;
	--bc-field: #f4f6f5;
	display: flex;
	justify-content: center;
	padding: 24px 16px;
	box-sizing: border-box;
	font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--bc-ink);
}
.bcrsvp-wrap *,
.bcrsvp-wrap *::before,
.bcrsvp-wrap *::after { box-sizing: border-box; }

.bcrsvp-card {
	position: relative;
	width: 100%;
	max-width: 655px;
	background: #fff;
	border-radius: 22px;
	padding: 50px;
	box-shadow: 0 24px 60px -24px rgba(14, 92, 58, .28), 0 2px 8px rgba(0,0,0,.04);
	overflow: hidden;
	text-align: center;
}
.bcrsvp-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: linear-gradient(90deg, var(--bc-green) 0%, #3fa66a 45%, #8bc48f 62%, var(--bc-gold) 100%);
}

.bcrsvp-step { animation: bcrsvp-fade .35s ease; }
.bcrsvp-step[hidden] { display: none; }
@keyframes bcrsvp-fade { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none; } }

.bcrsvp-eyebrow {
	font-family: Inter;
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #00432A;
}
.bcrsvp-eyebrow--ack {
	color: #2EB34C;
	font-size: 13px;
	letter-spacing: .16em;
	margin-bottom: 6px;
}
.bcrsvp-eyebrow--found span { text-transform: uppercase; }
.bcrsvp-eyebrow--found span::before { content: " · "; }
.bcrsvp-eyebrow--fail { color: #b3261e; }

.bcrsvp-title {
	font-family: "Cormorant Garamond";
	font-weight: 700;
	font-size: 38.3px;
	line-height: 1.15;
	margin: 0 0 16px;
	color: var(--bc-green-dark);
}
.bcrsvp-title [data-guest-name]::before { content: ", "; }

.bcrsvp-lead {
	font-family: Inter;
	margin: 0 auto 26px;
	max-width: 486px;
	font-size: 15.4px;
	line-height: 1.6;
	color: var(--bc-muted);
}

/* fields */
.bcrsvp-fields {
	display: flex;
	flex-direction: column;
	gap: 18px;
	text-align: left;
	margin-bottom: 8px;
}
.bcrsvp-field { flex: 1; }
.bcrsvp-field label {
	font-family: Inter;
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6E8390;
	margin-bottom: 10px;
}
.bcrsvp-required { color: #b3261e; font-size: 15px; font-weight: 800; vertical-align: middle; }
.bcrsvp-field input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #DDE7E1;;
	border-radius: 12px;
	background: #F6F7F9;;
	font-size: 16px;
	color: var(--bc-ink);
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.bcrsvp-field input:focus {
	outline: none;
	background: #fff;
	border-color: #2EB34C;
}

.bcrsvp-nominee-fields { margin: 20px 0 4px; }
.bcrsvp-nominee-fields[hidden] { display: none; }
.bcrsvp-fields-row { display: flex; gap: 14px; }
.bcrsvp-fields-row .bcrsvp-field { flex: 1; min-width: 0; }
.bcrsvp-fields-row .bcrsvp-field--salutation { flex: 0 0 20%; }

.bcrsvp-field--note { text-align: left; margin: 18px 0 4px; }
.bcrsvp-field--note textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--bc-line);
	border-radius: 12px;
	background: var(--bc-field);
	font-size: 15px;
	font-family: inherit;
	color: var(--bc-ink);
	resize: vertical;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.bcrsvp-field--note textarea:focus {
	outline: none;
	background: #fff;
	border-color: #2EB34C;
}

/* choices */
.bcrsvp-choices {
	display: flex;
	gap: 16px;
	margin: 24px 0 10px;
}
.bcrsvp-wrap .bcrsvp-choice {
	flex: 1;
	text-align: center;
	padding: 15px;
	border: 1.5px solid var(--bc-line);
	border-radius: 14px;
	background: var(--bc-field) !important;
	color: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s, box-shadow .15s, background .15s, transform .1s;
	font-family: inherit;
	min-width: 0;
}
.bcrsvp-wrap .bcrsvp-choice:hover { border-color: #2EB34C; background: #F2FAF3 !important; }
.bcrsvp-wrap .bcrsvp-choice.is-selected {
	border-color: #2EB34C;
	background: #F2FAF3 !important;
}
.bcrsvp-choice-main {
	display: block;
	font-family: Inter;
	font-size: 15.4px;
	color: var(--bc-green-dark);
	margin-bottom: 6px;
	word-wrap: break-word; 
  white-space: normal;
  line-height: 1.7em;
}
.bcrsvp-choice-sub {
	display: block;
	font-size: 13px;
	color: var(--bc-muted);
	word-wrap: break-word; 
  white-space: normal;
}

/* button */
.bcrsvp-actions { margin: 26px 0 18px; }
.bcrsvp-actions--split { display: flex; gap: 14px; }
.bcrsvp-actions--split .bcrsvp-btn { flex: 1; min-width: 0; }
.bcrsvp-wrap .bcrsvp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 210px;
	padding: 11px 22px;
	border: none;
	border-radius: 40px;
	background: var(--Gr-3, linear-gradient(180deg, #2EB34C 0%, #144D21 100%)) !important;
	color: #fff !important;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	cursor: pointer;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
	text-transform: none;
	transition: background .15s, transform .08s, box-shadow .15s;
	box-shadow: 0 10px 20px -10px rgba(14,92,58,.7);
}
.bcrsvp-wrap .bcrsvp-btn:hover { background: var(--Gr-3, linear-gradient(180deg, #144D21 0%, #2EB34C 100%)) !important; }
.bcrsvp-wrap .bcrsvp-btn:active { transform: translateY(0); }
.bcrsvp-wrap .bcrsvp-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.bcrsvp-wrap .bcrsvp-btn--outline {
	background: #fff !important;
	color: var(--bc-green-dark) !important;
	border: 1.5px solid var(--bc-line);
	box-shadow: none;
}
.bcrsvp-wrap .bcrsvp-btn--outline:hover {
	background: var(--bc-field) !important;
	border-color: #2EB34C;
	color: var(--bc-green-dark) !important;
}

.bcrsvp-spinner {
	width: 16px; height: 16px;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: bcrsvp-spin .7s linear infinite;
}
@keyframes bcrsvp-spin { to { transform: rotate(360deg); } }

/* help + errors */
.bcrsvp-help {
	font-family: Inter;
	margin: 6px 0 0;
	font-size: 13.5px;
	color: #6E8390;
}
.bcrsvp-help a { color: var(--bc-green-soft); }
.bcrsvp-help--lock { display: flex; align-items: center; justify-content: center; gap: 7px; }
.bcrsvp-help--lock[hidden] { display: none; }
.bcrsvp-lock { color: var(--bc-gold); }

.bcrsvp-error {
	margin: 4px 0 0;
	color: #b3261e;
	font-size: 14px;
	font-weight: 600;
}

/* done step */
.bcrsvp-done-mark {
	width: 66px; height: 66px;
	margin: 0 auto 20px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(14,92,58,.1);
}
.bcrsvp-done-mark::after {
	content: "";
	width: 22px; height: 12px;
	border-left: 3px solid var(--bc-green);
	border-bottom: 3px solid var(--bc-green);
	transform: rotate(-45deg) translateY(-2px);
}
.bcrsvp-done-mark.is-decline { background: rgba(179,38,30,.09); }
.bcrsvp-done-mark.is-decline::after {
	width: 24px; height: 24px;
	border: none;
	transform: none;
	background:
		linear-gradient(#b3261e,#b3261e) center/24px 3px no-repeat,
		linear-gradient(#b3261e,#b3261e) center/3px 24px no-repeat;
	transform: rotate(45deg);
}

.bcrsvp-step--done [data-done-eyebrow] { margin-top: 4px; color: #2EB34C; margin-bottom: 10px; }
.bcrsvp-step--done [data-done-eyebrow].is-decline { color: #b3261e; }

/* invalid-invitation step */
.bcrsvp-invalid-mark {
	width: 66px; height: 66px;
	margin: 0 auto 20px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(179,38,30,.09);
	font-size: 26px;
	line-height: 1;
}

/* RSVP summary card on the confirmed "done" screen */
.bcrsvp-summary {
	text-align: left;
	background: var(--bc-field);
	border: 1px solid var(--bc-line);
	border-radius: 14px;
	padding: 6px 20px;
	margin: 8px 0 4px;
}
.bcrsvp-summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--bc-line);
	font-size: 14.5px;
}
.bcrsvp-summary-row:last-child { border-bottom: none; }
.bcrsvp-summary-row span { color: var(--bc-muted); }
.bcrsvp-summary-row strong { color: var(--bc-green-dark); font-weight: 700; text-align: right; }

@media (max-width: 560px) {
	.bcrsvp-card { padding: 36px 24px 26px; border-radius: 18px; }
	.bcrsvp-title { font-size: 30px; }
	.bcrsvp-fields, .bcrsvp-choices, .bcrsvp-actions--split, .bcrsvp-fields-row { flex-direction: column; }
	.bcrsvp-fields-row .bcrsvp-field--salutation { flex: 1 1 auto; }
	.bcrsvp-wrap {padding: 0;}
	.bcrsvp-lead, .bcrsvp-help {font-size: 12.4px;}
}