/* Black & White theme */
#ack-rsvp { max-width: 760px; margin: 1rem auto; background: #fff; padding: 1.25rem 1.5rem; border: 2px solid #000; border-radius: 10px; color: #000; }
#ack-rsvp h3 { margin-top: 0; font-weight: 700; color: #000; }
#ack-rsvp label { display:block; margin: .65rem 0; color:#000; }
#ack-rsvp input, #ack-rsvp select, #ack-rsvp textarea { width:100%; padding:.6rem .7rem; border:2px solid #000; border-radius:8px; background:#fff; color:#000; box-sizing: border-box; line-height:1.35; min-height:44px; }
#ack-rsvp input:focus, #ack-rsvp select:focus, #ack-rsvp textarea:focus { outline: none; box-shadow: 0 0 0 3px #000; }

/* Better handling for native select controls so text doesn't get clipped */
/* custom dropdown arrow for selects */
#ack-rsvp select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 2.6rem; /* space for custom arrow */
	min-height: 55px;
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 12px;
	/* inline SVG arrow (black). '#' is encoded as %23 */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 7l5 5 5-5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
#ack-rsvp select::-ms-expand { display: none; } /* hide IE/Edge default arrow so padding works consistently */
#ack-rsvp .nav { margin-top:1rem; display:flex; gap:.6rem; }
#ack-rsvp .partner, #ack-rsvp .partner-menu { padding:.9rem; border:2px dashed #000; border-radius:10px; background:#fff; }
#ack-rsvp .button { background:#000; color:#fff; border:2px solid #000; border-radius:8px; padding:.5rem .9rem; cursor:pointer; }
#ack-rsvp .button:hover { background:#fff; color:#000; }
#ack-rsvp .button.button-primary { background:#000; color:#fff; }
.resume-note { color:#000; opacity:.7; }

/* --- Gift Card styles --- */
.ack-card { background: #efe6e3; border-radius: 12px; padding: 28px; border: 2px solid rgba(0,0,0,0.6); }
.ack-card-logo { text-align: center; margin-bottom: 18px; }
.ack-card-logo img { max-width: 420px; width: 60%; height: auto; display: inline-block; }
.ack-card-body { display:flex; gap:28px; align-items:flex-start; }
.ack-card-media { flex:0 0 220px; }
.ack-card-media img { width:100%; height:auto; display:block; border-radius:4px; }
.ack-card-controls { flex:1 1 320px; }
.ack-card-title { font-size:42px; margin:6px 0 12px; font-weight:700; color:#000; }
.ack-amount-label { display:block; font-weight:700; margin-bottom:12px; color:#000; }
.ack-amount-label input { width:70%; padding:.9rem 1rem; border-radius:999px; border: none; background:#fff; box-shadow: none; }
.payment-area { margin-top:12px; }
.dev-hint { margin-top:10px; color:#000; opacity:0.8; }

@media (max-width: 720px) {
	#ack-rsvp { max-width: 100%; padding: 18px; }
	.ack-card-body { flex-direction:column; }
	.ack-card-media { width:100%; max-width:320px; margin:0 auto 12px; }
	.ack-card-logo img { width:80%; }
	.ack-amount-label input { width:100%; }
}

.button#ack-paylater-btn { background: transparent; color: #000; border: 2px dashed rgba(0,0,0,0.7); border-radius:8px; padding:.5rem .9rem; }
.button#ack-paylater-btn:hover { background:#000; color:#fff; border-color:#000; }

/* Completion notice modal */
.ack-modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,0.55); z-index: 9999; opacity: 0; animation: ackModalFadeIn 0.18s ease forwards; }
.ack-modal-overlay.ack-modal-closing { animation: ackModalFadeOut 0.18s ease forwards; }
.ack-modal-card { background: #efe6e3; border-radius: 16px; border: 2px solid rgba(0,0,0,0.6); box-shadow: 0 22px 45px rgba(0,0,0,0.25); max-width: 420px; width: 100%; padding: 32px 28px; text-align: center; color: #000; }
.ack-modal-title { margin: 0 0 12px; font-size: 28px; font-weight: 700; color: #000; }
.ack-modal-message { margin: 0 0 26px; line-height: 1.6; font-size: 17px; color: #000; }
.ack-modal-btn { background: #000; color: #fff; border: 2px solid #000; border-radius: 999px; padding: 0.65rem 1.8rem; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.ack-modal-btn:hover, .ack-modal-btn:focus { background: #fff; color: #000; outline: none; }
.ack-modal-btn:focus-visible { box-shadow: 0 0 0 3px rgba(0,0,0,0.25); }

@keyframes ackModalFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ackModalFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } }