/* ============================================
   RSVP MODAL
   ============================================ */

.rsvp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 44, 44, 0.5);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.rsvp-modal-card {
    background:
        var(--env-paper-grain),
        linear-gradient(135deg, #faf5f0 0%, #f5ede5 40%, #faf5f0 100%);
    border-radius: 16px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 3rem 2.5rem 2.5rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
    position: relative;
    border: 1px solid rgba(212, 184, 150, 0.3);
    animation: rsvp-card-unfold 0.6s ease-out forwards;
    transform-origin: center center;
}

@keyframes rsvp-card-unfold {
    0%   { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Decorative filigree corners */
.rsvp-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: #c17c74;
    border-style: solid;
    opacity: 0.4;
    z-index: 1;
}

.rsvp-corner--tl { top: 10px; left: 10px; border-width: 1.5px 0 0 1.5px; border-radius: 3px 0 0 0; }
.rsvp-corner--tr { top: 10px; right: 10px; border-width: 1.5px 1.5px 0 0; border-radius: 0 3px 0 0; }
.rsvp-corner--bl { bottom: 10px; left: 10px; border-width: 0 0 1.5px 1.5px; border-radius: 0 0 0 3px; }
.rsvp-corner--br { bottom: 10px; right: 10px; border-width: 0 1.5px 1.5px 0; border-radius: 0 0 3px 0; }

/* Floral header sprig */
.rsvp-floral-header {
    text-align: center;
    margin-bottom: 0.5rem;
}

.rsvp-floral-svg {
    width: 100px;
    height: auto;
}

.rsvp-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-sage);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.rsvp-modal-close:hover {
    background: var(--color-cream);
    color: var(--color-text-dark);
}

.rsvp-title {
    font-family: var(--font-script);
    font-size: 2.4rem;
    text-align: center;
    color: var(--color-text-dark);
    margin-bottom: 1.5rem;
    text-transform: none;
    letter-spacing: 0.02em;
}

.rsvp-form-group {
    margin-bottom: 1.75rem;
}

.rsvp-label {
    display: block;
    font-family: var(--font-sc);
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    color: #1c1209;
    margin-bottom: 0.6rem;
}

.rsvp-input,
.rsvp-select,
.rsvp-textarea {
    width: 100%;
    padding: 0.6rem 0.25rem;
    border: none;
    border-bottom: 1px solid rgba(181, 196, 177, 0.4);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-style: italic;
    background: transparent;
    color: #1c1209;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.rsvp-input:focus,
.rsvp-select:focus,
.rsvp-textarea:focus {
    border-bottom-color: #c17c74;
    outline: none;
    box-shadow: 0 1px 0 0 rgba(193, 124, 116, 0.3);
}

.rsvp-select {
    border-bottom-style: solid;
    appearance: none;
    padding-right: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b5c4b1' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.25rem center;
}

.rsvp-textarea {
    min-height: 80px;
    resize: vertical;
}

.rsvp-textarea--short {
    min-height: 50px;
}

.rsvp-optional {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--color-sage);
    opacity: 0.7;
}

.rsvp-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.rsvp-radio-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 1.05rem;
    color: #1c1209;
    padding: 0.25rem 0;
}

.rsvp-radio-option input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--color-rose);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.3s ease;
}

.rsvp-radio-option input[type="radio"]:checked {
    border-color: #c17c74;
}

.rsvp-radio-option input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-rose);
}

/* Plus-One Section */
.rsvp-plus-ones {
    border: 1px solid rgba(164, 180, 148, 0.3);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    background: rgba(245, 245, 220, 0.15);
}

.rsvp-plus-one-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.rsvp-plus-one-header h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    margin: 0;
}

.btn-add-plus-one {
    background: none;
    border: 1px solid #c17c74;
    color: #c17c74;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-add-plus-one:hover {
    background: #c17c74;
    color: var(--color-text-light);
}

.plus-one-entry {
    padding: 1rem 0;
    border-top: 1px solid rgba(164, 180, 148, 0.2);
}

.plus-one-entry:first-of-type {
    border-top: none;
    padding-top: 0;
}

.plus-one-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.btn-remove-plus-one {
    background: none;
    border: none;
    color: #c0392b;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    font-family: var(--font-body);
    transition: opacity 0.2s ease;
}

.btn-remove-plus-one:hover {
    opacity: 0.7;
}

/* Download Notice */
.rsvp-download-notice {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-dark);
}

.rsvp-download-notice strong {
    color: #c17c74;
}

.rsvp-submit {
    width: 100%;
    padding: 0.85rem;
    background: linear-gradient(135deg, #c17c74 0%, #7a9e7e 100%);
    color: var(--color-text-dark);
    border: none;
    border-radius: 30px;
    font-family: var(--font-sc);
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(212, 184, 150, 0.3);
}

.rsvp-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(212, 184, 150, 0.4);
    filter: brightness(1.05);
}

.rsvp-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* --- Confetti Animation (on successful submit) --- */
.rsvp-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
}

.confetti-piece {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    left: var(--cx);
    top: var(--cy);
    opacity: 0;
    animation: confetti-fall var(--cdur) ease-out var(--cdel) forwards;
}

.confetti-piece--0 { background: var(--color-rose); width: 7px; height: 5px; border-radius: 50%; }
.confetti-piece--1 { background: #c17c74; width: 4px; height: 4px; }
.confetti-piece--2 { background: var(--color-sage); width: 6px; height: 4px; border-radius: 40%; }
.confetti-piece--3 { background: var(--color-lavender); width: 5px; height: 5px; border-radius: 50%; }
.confetti-piece--4 { background: #c17c74; width: 3px; height: 6px; }

@keyframes confetti-fall {
    0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(400px) rotate(var(--crot, 180deg)); }
}

.rsvp-success {
    text-align: center;
    padding: 2rem 0;
}

.rsvp-success h2 {
    font-family: var(--font-heading);
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

.rsvp-success p {
    color: var(--color-sage);
    font-size: 0.95rem;
}

/* --- Song Entry System --- */
.rsvp-songs-section {
    margin-bottom: 2rem;
}

.song-entry {
    position: relative;
    margin-bottom: 0.75rem;
}

/* Inline form: sage accent border for visual grouping of song entries */
.rsvp-inline-form .song-entry {
    padding: 0.4rem 0.4rem 0.4rem 0.6rem;
    border-left: 2px solid rgba(181, 196, 177, 0.35);
    margin-left: 0.2rem;
    border-radius: 0 4px 4px 0;
}

.song-entry--added {
    animation: song-fade-in 0.3s ease-out forwards;
}

@keyframes song-fade-in {
    0%   { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.song-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.song-input {
    font-size: 0.9rem !important;
}

.song-remove {
    position: absolute;
    top: 4px;
    right: -30px;
    background: #e53e3e;
    border: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
    padding: 0;
    line-height: 1;
    pointer-events: auto !important;
    z-index: 99999 !important;
}

.song-remove:hover {
    background: #c53030;
    transform: scale(1.1);
}

.song-add {
    background: none;
    border: none;
    color: var(--color-text-dark);
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.4rem 0;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.song-add:hover {
    opacity: 1;
}

.playlist-field {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(181, 196, 177, 0.2);
}

.playlist-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.playlist-icon {
    width: 16px;
    height: 16px;
    color: var(--color-sage);
    position: absolute;
    left: 0;
    opacity: 0.5;
}

.playlist-input {
    padding-left: 24px !important;
}

/* --- Celebration Success State (Joyfully Accept) --- */
.rsvp-success--celebrate {
    padding: 2.5rem 0 1.5rem;
    position: relative;
    overflow: hidden;
}

.rsvp-celebrate-title {
    font-family: var(--font-script);
    font-size: 1.8rem;
    color: var(--color-text-dark);
    margin-bottom: 0.6rem;
    animation: celebrate-text-enter 1s ease-out 0.5s both;
}

.rsvp-celebrate-subtitle {
    font-family: var(--font-sc);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--color-text-dark);
    opacity: 0.7;
    margin-bottom: 1rem;
    animation: celebrate-text-enter 1s ease-out 0.8s both;
}

@keyframes celebrate-text-enter {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Watercolor floral bloom */
.rsvp-bloom {
    width: 100px;
    height: 100px;
    margin: 0 auto 1rem;
}

.rsvp-bloom-svg {
    width: 100%;
    height: 100%;
}

.bloom-petal {
    transform-origin: 60px 60px;
    animation: bloom-unfurl 1.5s ease-out forwards;
    opacity: 0;
}

.bloom-petal--1 { animation-delay: 0.1s; }
.bloom-petal--2 { animation-delay: 0.2s; }
.bloom-petal--3 { animation-delay: 0.3s; }
.bloom-petal--4 { animation-delay: 0.4s; }
.bloom-petal--5 { animation-delay: 0.5s; }
.bloom-petal--6 { animation-delay: 0.6s; }
.bloom-petal--7 { animation-delay: 0.7s; }
.bloom-petal--8 { animation-delay: 0.8s; }

.bloom-center {
    opacity: 0;
    animation: bloom-center-appear 0.6s ease-out 1s forwards;
}

@keyframes bloom-unfurl {
    0%   { opacity: 0; transform: scale(0.3) rotate(0deg); }
    60%  { opacity: 0.6; }
    100% { opacity: 0.5; transform: scale(1) rotate(0deg); }
}

@keyframes bloom-center-appear {
    0%   { opacity: 0; transform: scale(0); }
    100% { opacity: 0.6; transform: scale(1); }
}

/* Pulsing heart */
.rsvp-heart {
    margin: 0.5rem auto;
    width: 24px;
    height: 24px;
    animation: celebrate-text-enter 0.8s ease-out 1.2s both;
}

.rsvp-heart-svg {
    width: 100%;
    height: 100%;
    animation: heart-pulse 1.5s ease-in-out infinite;
}

@keyframes heart-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

/* Ambient bokeh orbs */
.rsvp-bokeh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.bokeh-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 184, 150, 0.3) 0%, transparent 70%);
    opacity: 0;
}

.bokeh-orb--1 {
    width: 40px;
    height: 40px;
    top: 20%;
    left: 10%;
    animation: bokeh-float 8s ease-in-out 2s infinite;
}

.bokeh-orb--2 {
    width: 30px;
    height: 30px;
    top: 60%;
    right: 15%;
    animation: bokeh-float 10s ease-in-out 3s infinite;
}

.bokeh-orb--3 {
    width: 25px;
    height: 25px;
    bottom: 25%;
    left: 60%;
    animation: bokeh-float 7s ease-in-out 4s infinite;
}

@keyframes bokeh-float {
    0%, 100% { opacity: 0; transform: translateY(0) translateX(0); }
    30%      { opacity: 0.15; }
    50%      { opacity: 0.2; transform: translateY(-15px) translateX(8px); }
    70%      { opacity: 0.15; }
}

/* ─── RSVP Inline Form (embedded in book page) ─── */
/* RSVP form scrolls within the book page — content is taller than one page */
.rsvp-inline-form {
    animation: rsvpFormFadeIn 0.4s ease-out;
    position: relative;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    line-height: var(--notebook-line-height);
    isolation: isolate;
    touch-action: auto;
}

/* Restore normal touch handling on RSVP page content (overrides book-interop's pan-y) */
.book-page[data-page-index="1"] .book-page-content {
    touch-action: auto;
}

/* ============================================
   NUCLEAR INTERACTIVITY FIX
   Brute-force ensure all form elements are
   always clickable regardless of any overlay,
   z-index, or pointer-events conflict.
   ============================================ */

/* Disable pointer events on ALL non-form elements inside RSVP page */
.rsvp-inline-form *:not(input):not(textarea):not(button):not(label):not(select):not(form):not(fieldset):not(legend):not(.rsvp-radio-option):not(.rsvp-radio-group):not(.rsvp-form-group):not(.song-row):not(.song-entry):not(.playlist-input-wrap):not(.rsvp-download-notice):not(.EditForm) {
    pointer-events: none !important;
}

/* Force ALL form elements to be interactive — overrides everything */
.rsvp-inline-form input[type="radio"],
.rsvp-inline-form input[type="text"],
.rsvp-inline-form input[type="url"],
.rsvp-inline-form textarea,
.rsvp-inline-form button[type="submit"],
.rsvp-inline-form button[type="button"],
.rsvp-inline-form .song-add,
.rsvp-inline-form .song-remove {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 99999 !important;
    cursor: pointer;
}

.rsvp-inline-form input[type="text"],
.rsvp-inline-form input[type="url"],
.rsvp-inline-form textarea {
    cursor: text !important;
}

/* Labels must be clickable (they wrap radio inputs) */
.rsvp-inline-form label,
.rsvp-inline-form .rsvp-radio-option,
.rsvp-inline-form .rsvp-label {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 99998 !important;
    cursor: pointer;
}

/* Form containers must allow events to pass through to children */
.rsvp-inline-form form,
.rsvp-inline-form fieldset,
.rsvp-inline-form .rsvp-form-group,
.rsvp-inline-form .rsvp-radio-group,
.rsvp-inline-form .song-row,
.rsvp-inline-form .song-entry,
.rsvp-inline-form .playlist-input-wrap,
.rsvp-inline-form .rsvp-download-notice {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 99990 !important;
}

/* Scrollbar styling — leather bookmark aesthetic */
.rsvp-inline-form::-webkit-scrollbar {
    width: 8px;
}

.rsvp-inline-form::-webkit-scrollbar-track {
    background: rgba(250, 245, 240, 0.3);
    border-left: 1px solid rgba(160, 150, 130, 0.2);
}

.rsvp-inline-form::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        rgba(193, 124, 116, 0.6),
        rgba(168, 93, 85, 0.7));
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.rsvp-inline-form::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
        rgba(168, 93, 85, 0.8),
        rgba(140, 70, 62, 0.9));
}

/* Firefox scrollbar */
.rsvp-inline-form {
    scrollbar-color: rgba(193, 124, 116, 0.6) rgba(250, 245, 240, 0.3);
}

/* Tight top padding + spine clearance */
.rsvp-inline-form.book-page-section-content {
    padding-top: 0.5rem;
    padding-left: 3rem;
}

.rsvp-inline-form .rsvp-title {
    margin-top: 0;
    margin-bottom: calc(var(--notebook-line-height) * 0.5);
}

.rsvp-inline-form .rsvp-submit {
    margin-bottom: 0.5rem;
}

.rsvp-inline-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--color-sage, #A4B494);
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 8px 12px;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.rsvp-inline-back:hover {
    color: var(--color-forest, #3D5941);
    background: rgba(181, 196, 177, 0.1);
}

.rsvp-inline-back svg {
    transition: transform 0.2s ease;
}

.rsvp-inline-back:hover svg {
    transform: translateX(-2px);
}

@keyframes rsvpFormFadeIn {
    0%   { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Success state adjustments for inline form */
.rsvp-inline-form .rsvp-success--celebrate {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.rsvp-inline-form .rsvp-confetti {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   RSVP INLINE — NOTEBOOK PAGE AESTHETIC
   All rules scoped to .rsvp-inline-form to avoid breaking modal mode
   ═══════════════════════════════════════════════════════════════ */

/* --- TASK 1: Notebook background --- */

.rsvp-inline-form {
    background-image: url('/images/backgrounds/notebook-lined.jpg');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: local;
    border-radius: 6px;
}

/* Seamless ruled lines continuation for scrolled content */
.rsvp-inline-form::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent calc(var(--notebook-line-height) - 1px),
            var(--notebook-line-color) calc(var(--notebook-line-height) - 1px),
            var(--notebook-line-color) var(--notebook-line-height)
        );
    background-position: 0 var(--notebook-top-margin);
    mask-image: linear-gradient(to bottom, transparent 0px, transparent 1050px, black 1050px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, transparent 1050px, black 1050px);
}

.rsvp-inline-form > * {
    position: relative;
    z-index: 1;
}

/* Guarantee form elements are always above decorations */
.rsvp-inline-form input,
.rsvp-inline-form textarea,
.rsvp-inline-form button,
.rsvp-inline-form label,
.rsvp-inline-form .rsvp-radio-option,
.rsvp-inline-form .rsvp-radio-group,
.rsvp-inline-form .rsvp-form-group,
.rsvp-inline-form fieldset {
    position: relative;
    z-index: 10;
}

/* --- TASK 2: Ink-written typography --- */

.rsvp-inline-form .rsvp-title {
    font-family: var(--font-script);
    font-size: 2.6rem;
    color: #1c1209;
    text-shadow:
        1px 1px 2px rgba(28, 18, 9, 0.25),
        0 0 8px rgba(250, 240, 225, 0.6),
        0 0 20px rgba(232, 196, 188, 0.15),
        0 0 1px rgba(28, 18, 9, 0.15);
    margin-bottom: var(--notebook-line-height);
    line-height: calc(var(--notebook-line-height) * 2);
    animation: rsvpTitleFadeWrite 0.8s ease-out 0.2s both;
}

.rsvp-inline-form .rsvp-label {
    font-family: var(--font-handwriting);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ink-color);
    text-shadow: 0 0 1.5px rgba(26, 26, 46, 0.1);
    line-height: var(--notebook-line-height);
    margin-bottom: 0.4rem;
    display: block;
}

.rsvp-inline-form .rsvp-optional {
    font-family: var(--font-handwriting);
    color: var(--ink-color-faded);
    font-size: 0.85rem;
}

.rsvp-inline-form .rsvp-form-group {
    margin-bottom: var(--notebook-line-height);
}

/* Subtle dashed separators between form sections — mimics notebook ruling */
.rsvp-inline-form .rsvp-form-group + .rsvp-form-group {
    padding-top: calc(var(--notebook-line-height) * 0.6);
    border-top: 1px dashed rgba(160, 150, 130, 0.3);
}

/* --- TASK 3: Handwriting input fields --- */

.rsvp-inline-form .rsvp-input,
.rsvp-inline-form .rsvp-select,
.rsvp-inline-form .rsvp-textarea {
    border: none;
    border-bottom: 1.5px solid rgba(44, 26, 14, 0.25); /* persistent ink underline */
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--font-handwriting);
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--ink-color);
    line-height: var(--notebook-line-height);
    padding: 0.1rem 0.15rem;
    text-shadow: 0 0 1px rgba(26, 26, 46, 0.08);
    caret-color: var(--ink-color);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.rsvp-inline-form .rsvp-input::placeholder,
.rsvp-inline-form .rsvp-textarea::placeholder {
    color: rgba(107, 74, 42, 0.6);
    font-style: italic;
    font-weight: 400;
}

.rsvp-inline-form .rsvp-input:focus,
.rsvp-inline-form .rsvp-select:focus,
.rsvp-inline-form .rsvp-textarea:focus {
    outline: none;
    border-bottom: 2px solid rgba(44, 26, 14, 0.5);
    box-shadow: none;
    background: rgba(250, 245, 240, 0.2);
}

.rsvp-inline-form .rsvp-textarea {
    min-height: calc(var(--notebook-line-height) * 3.5);
    resize: vertical;
    line-height: var(--notebook-line-height);
    border: 1.5px solid rgba(44, 26, 14, 0.15);
    border-radius: 4px;
    padding: 0.4rem 0.5rem;
}

.rsvp-inline-form .rsvp-textarea--short {
    min-height: calc(var(--notebook-line-height) * 2);
}

.rsvp-inline-form .song-input {
    font-size: 1.1rem;
    font-family: var(--font-handwriting);
    font-style: normal;
    border-bottom: 1px solid rgba(26, 26, 46, 0.15);
}

.rsvp-inline-form .song-add {
    font-family: var(--font-handwriting);
    font-style: normal;
    font-size: 1.05rem;
    color: #c17c74;
    opacity: 0.85;
    text-decoration: none;
    border: none;
    background: none;
    letter-spacing: 0;
    font-weight: 600;
}

.rsvp-inline-form .song-add:hover {
    opacity: 0.8;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--ink-color-faded);
    text-underline-offset: 3px;
}

.rsvp-inline-form .song-remove {
    color: var(--ink-color);
    opacity: 0.35;
    font-family: var(--font-handwriting);
}

.rsvp-inline-form .song-remove:hover {
    opacity: 0.7;
}

.rsvp-inline-form .playlist-field {
    border-top: 1px dashed var(--ink-color-faded);
}

.rsvp-inline-form .playlist-icon {
    color: var(--ink-color);
    opacity: 0.35;
}

/* --- TASK 4: Hand-drawn radio buttons --- */

.rsvp-inline-form .rsvp-radio-group {
    gap: 0;
}

.rsvp-inline-form .rsvp-radio-option {
    font-family: var(--font-handwriting);
    font-size: 1.2rem;
    color: #1c1209;
    transition: color 0.3s ease, background-color 0.2s ease;
    padding: 0.4rem 0.6rem;
    line-height: var(--notebook-line-height);
    border-radius: 4px;
    cursor: pointer;
}

.rsvp-inline-form .rsvp-radio-option:hover {
    background: rgba(250, 245, 240, 0.3);
}

.rsvp-inline-form .rsvp-radio-option:has(input:checked) {
    color: var(--ink-color);
    font-weight: 600;
}

.rsvp-inline-form .rsvp-radio-option input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 0;
    background: transparent;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.rsvp-inline-form .rsvp-radio-option input[type="radio"]::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--ink-color-faded);
    border-radius: 47% 53% 52% 48% / 50% 48% 52% 50%;
    transition: border-color 0.3s ease, border-width 0.3s ease;
}

.rsvp-inline-form .rsvp-radio-option input[type="radio"]:checked::before {
    border-color: var(--ink-color);
    border-width: 2.5px;
    animation: inkCircleDraw 0.4s ease-out forwards;
}

.rsvp-inline-form .rsvp-radio-option input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-color);
    animation: inkDotAppear 0.3s ease-out 0.15s both;
}

@keyframes inkCircleDraw {
    0%   { clip-path: polygon(50% 0%, 50% 0%, 50% 50%); opacity: 0.5; }
    50%  { clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%); opacity: 0.8; }
    100% { clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%); opacity: 1; }
}

@keyframes inkDotAppear {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    60%  { transform: translate(-50%, -50%) scale(1.3); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* --- TASK 5: Submit button — ink stamp --- */

.rsvp-inline-form .rsvp-submit {
    background: #f5f0e8;
    border: 2.5px solid #4a3728;
    border-radius: 3px 2px 4px 2px;
    color: #1c1209;
    font-family: var(--font-script);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 0.8rem 2.5rem;
    margin-top: calc(var(--notebook-line-height) * 1.25);
    box-shadow: none;
    position: relative;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    width: auto;
    margin: 0 auto;
    display: block;
}

.rsvp-inline-form .rsvp-submit:hover {
    background: radial-gradient(ellipse at center, #f0d0cc 0%, #f5e6e4 60%, #f5f0e8 100%);
    border-color: #a85d55;
    color: #8a3a32;
    box-shadow:
        0 0 8px rgba(193, 124, 116, 0.3),
        0 0 16px rgba(155, 137, 180, 0.2),
        0 0 24px rgba(122, 158, 126, 0.15);
    text-shadow: 0 0 8px rgba(155, 137, 180, 0.4);
    transform: none;
    filter: none;
}

.rsvp-inline-form .rsvp-submit:active {
    background: radial-gradient(ellipse at center, #e8c0bb 0%, #f0d8d4 60%, #f0e8e0 100%);
    border-color: #8a3a32;
    box-shadow:
        0 0 6px rgba(193, 124, 116, 0.4),
        0 0 12px rgba(155, 137, 180, 0.25);
}

.rsvp-inline-form .rsvp-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-style: dashed;
}

.rsvp-inline-form .rsvp-download-notice {
    background: rgba(250, 245, 240, 0.15);
    border: none;
    border-left: 2px solid var(--ink-color-faded);
    border-radius: 0 4px 4px 0;
    font-family: var(--font-handwriting);
    font-size: 0.95rem;
    color: var(--ink-color);
    opacity: 0.8;
    text-align: left;
    padding: 0.6rem 0.85rem;
    margin-bottom: calc(var(--notebook-line-height) * 1.25);
}

.rsvp-inline-form .rsvp-download-notice strong {
    color: var(--ink-color);
    font-weight: 700;
}

/* Success states — ink-drying effect */
.rsvp-inline-form .rsvp-success h2 {
    font-family: 'Pinyon Script', var(--font-script);
    color: var(--ink-color);
    font-size: 1.8rem;
    text-shadow: 0 0 2px rgba(26, 26, 46, 0.12);
}

.rsvp-inline-form .rsvp-success p {
    font-family: var(--font-handwriting);
    color: var(--ink-color);
    opacity: 0.7;
    font-size: 1rem;
}

.rsvp-inline-form .rsvp-celebrate-title {
    font-family: 'Pinyon Script', var(--font-script);
    color: var(--ink-color);
    text-shadow: 0 0 3px rgba(26, 26, 46, 0.15);
    animation: inkDryIn 1.2s ease-out 0.3s both;
}

.rsvp-inline-form .rsvp-celebrate-subtitle {
    font-family: var(--font-handwriting);
    color: var(--ink-color);
    opacity: 0.6;
    animation: inkDryIn 1s ease-out 0.6s both;
}

@keyframes inkDryIn {
    0%   { opacity: 0; filter: blur(2px); transform: translateY(5px); }
    40%  { opacity: 0.7; filter: blur(0.5px); }
    100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.rsvp-inline-form .rsvp-heart-svg {
    fill: var(--ink-color);
    opacity: 0.5;
}

/* --- Pastel section label colors --- */
.rsvp-inline-form .rsvp-songs-section .rsvp-label {
    color: #a85d55;
}

.rsvp-inline-form .playlist-field .rsvp-label {
    color: #4d7a56;
}

.rsvp-inline-form .rsvp-form-group > label[for="dietary"] {
    color: #a06535;
}

/* Message for the Couple section removed */

/* Botanical glyphs before section labels */
.rsvp-inline-form .rsvp-songs-section .rsvp-label::before {
    content: '\273F ';
    color: #a85d55;
}

.rsvp-inline-form .playlist-field .rsvp-label::before {
    content: '\2767 ';
    color: #4d7a56;
}

.rsvp-inline-form .rsvp-form-group > label[for="dietary"]::before {
    content: '\2618 ';
    color: #a06535;
}

/* Message glyph removed */

/* --- Hand-drawn input box borders --- */
.rsvp-inline-form .rsvp-input,
.rsvp-inline-form .rsvp-textarea {
    border: 1.5px solid #4a3728;
    border-radius: 2px 1px 3px 2px;
    padding: 0.15rem 0.3rem;
    transition: border-color 0.2s ease;
}

.rsvp-inline-form .rsvp-input:focus,
.rsvp-inline-form .rsvp-textarea:focus {
    border-color: #c17c74;
    box-shadow: none;
}

/* Per-section placeholder colors */
.rsvp-inline-form .song-input::placeholder {
    color: #a85d55;
    opacity: 0.8;
}

.rsvp-inline-form .playlist-input::placeholder {
    color: #4d7a56;
    opacity: 0.8;
}

.rsvp-inline-form #dietary::placeholder {
    color: #a06535;
    opacity: 0.8;
}

/* Message placeholder removed */

/* Playlist icon in sage */
.rsvp-inline-form .playlist-icon {
    color: #7a9e7e;
    opacity: 1;
}

/* --- Hobbit corner illustrations --- */
.rsvp-corner-illustrations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.rsvp-corner-illust {
    position: absolute;
}

.rsvp-corner-illust--tl { top: 8px; left: 8px; width: 28px; height: 28px; color: #7a9e7e; }
.rsvp-corner-illust--tr { top: 8px; right: 8px; width: 24px; height: 24px; color: #c17c74; }
.rsvp-corner-illust--bl { bottom: 8px; left: 8px; width: 24px; height: 22px; color: #c17c74; }
.rsvp-corner-illust--br { bottom: 8px; right: 8px; width: 22px; height: 24px; color: #8b6b47; }

/* --- TASK 6: Enhancements --- */

/* Page curl shadow — bottom-right */
.rsvp-inline-form::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: radial-gradient(
        ellipse at 100% 100%,
        rgba(0, 0, 0, 0.08) 0%,
        rgba(0, 0, 0, 0.03) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 2;
    border-radius: 0 0 6px 0;
}

/* Ink smudge watermark */
.rsvp-inline-form .rsvp-floral-header {
    opacity: 0.4;
    position: relative;
}

.rsvp-inline-form .rsvp-floral-header::after {
    content: '';
    position: absolute;
    top: 15px;
    right: 10px;
    width: 30px;
    height: 20px;
    background: radial-gradient(
        ellipse,
        rgba(26, 26, 46, 0.04) 0%,
        rgba(26, 26, 46, 0.02) 50%,
        transparent 80%
    );
    border-radius: 60% 40% 50% 50%;
    transform: rotate(-15deg);
    pointer-events: none;
}

/* Back button — notebook style */
.rsvp-inline-form .rsvp-inline-back {
    font-family: var(--font-handwriting);
    color: var(--ink-color);
    opacity: 0.5;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: 0;
}

.rsvp-inline-form .rsvp-inline-back:hover {
    opacity: 0.8;
    color: var(--ink-color);
    background: transparent;
}

/* RSVP heading write-in animation */
@keyframes rsvpTitleFadeWrite {
    0%   { opacity: 0; letter-spacing: 0.15em; }
    30%  { opacity: 0.5; }
    100% { opacity: 1; letter-spacing: 0.02em; }
}

/* Notebook doodle decoration */
.rsvp-inline-form .rsvp-notebook-doodle {
    text-align: center;
    color: var(--ink-color);
    margin-bottom: 0.25rem;
    position: relative;
    z-index: 1;
}

.notebook-swirl-svg {
    width: 50px;
    height: auto;
}

/* Subtle flourish below submit */
.rsvp-inline-form .rsvp-submit + * {
    margin-top: calc(var(--notebook-line-height) * 0.5);
}

/* --- Responsive: mobile notebook --- */
@media (max-width: 768px) {
    .rsvp-inline-form .rsvp-title {
        font-size: 2rem;
    }

    .rsvp-inline-form .rsvp-label {
        font-size: 1.1rem;
    }

    .rsvp-inline-form .rsvp-input,
    .rsvp-inline-form .rsvp-textarea {
        font-size: 1rem;
    }

    .rsvp-inline-form .rsvp-radio-option {
        font-size: 1.05rem;
        padding: 0.3rem 0.5rem;
    }

    .rsvp-inline-form .rsvp-submit {
        font-size: 1.3rem;
        padding: 0.7rem 1.8rem;
    }

    .rsvp-inline-form .song-entry {
        padding-left: 0.4rem;
    }
}

/* ============================================
   RSVP Confirmation Page — Animated Success
   ============================================ */

.rsvp-confirmation {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url('/images/backgrounds/rsvp-confirmation.jpg');
    background-size: cover;
    background-position: center;
    animation: rsvp-confirm-fadein 0.8s ease-out both;
    z-index: 5;
    text-align: center;
    padding: 2rem;
}

.rsvp-confirmation::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(250, 240, 225, 0.15) 0%,
        rgba(250, 240, 225, 0.05) 50%,
        rgba(250, 240, 225, 0.2) 100%);
    pointer-events: none;
}

.rsvp-confirm-title {
    font-family: var(--font-script);
    font-size: 2.8rem;
    color: #c9a96e;
    text-align: center;
    position: relative;
    z-index: 1;
    animation: rsvp-title-glow 3s ease-in-out 2.5s infinite;
    text-shadow:
        0 0 10px rgba(201, 169, 110, 0.4),
        0 0 20px rgba(201, 169, 110, 0.2),
        1px 1px 2px rgba(28, 18, 9, 0.3);
}

.rsvp-confirm-subtitle {
    font-family: var(--font-manuscript-body);
    font-size: 1.1rem;
    color: #1c1209;
    text-align: center;
    position: relative;
    z-index: 1;
    margin-top: 0.8rem;
    opacity: 0;
    animation: rsvp-subtitle-fadein 0.6s ease-out 2s forwards;
}

/* Floral wreath around title */
.rsvp-confirm-wreath {
    position: relative;
    z-index: 1;
    margin-bottom: 0.5rem;
}

.rsvp-confirm-wreath svg {
    width: 180px;
    height: 120px;
    opacity: 0;
    animation: rsvp-wreath-draw 1.5s ease-out 1s forwards;
}

/* Floating petals */
.rsvp-confirm-petals {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.rsvp-confirm-petal {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50% 0 50% 0;
    top: -10px;
    animation: rsvp-petal-drift 8s ease-in-out infinite;
}

.rsvp-confirm-petal--1 { left: 15%; background: rgba(193, 124, 116, 0.4); animation-delay: 0s; }
.rsvp-confirm-petal--2 { left: 35%; background: rgba(232, 196, 160, 0.35); animation-delay: 1.5s; width: 6px; height: 6px; }
.rsvp-confirm-petal--3 { left: 55%; background: rgba(193, 124, 116, 0.35); animation-delay: 3s; }
.rsvp-confirm-petal--4 { left: 75%; background: rgba(212, 196, 232, 0.35); animation-delay: 0.8s; width: 7px; height: 7px; }
.rsvp-confirm-petal--5 { left: 90%; background: rgba(193, 124, 116, 0.3); animation-delay: 2.2s; width: 5px; height: 5px; }
.rsvp-confirm-petal--6 { left: 45%; background: rgba(232, 196, 160, 0.3); animation-delay: 4s; }

/* Wax seal stamp */
.rsvp-confirm-seal {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    opacity: 0;
    animation: rsvp-seal-stamp 0.5s ease-out 2.8s forwards;
}

.rsvp-confirm-seal svg {
    width: 50px;
    height: 50px;
}

/* Sparkle stars */
.rsvp-confirm-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.rsvp-confirm-sparkle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(193, 124, 116, 0.5);
    animation: rsvp-sparkle-twinkle 4s ease-in-out infinite;
}

.rsvp-confirm-sparkle--1 { top: 15%; left: 20%; animation-delay: 0s; }
.rsvp-confirm-sparkle--2 { top: 25%; right: 15%; animation-delay: 1s; background: rgba(155, 137, 180, 0.5); }
.rsvp-confirm-sparkle--3 { top: 60%; left: 10%; animation-delay: 2s; }
.rsvp-confirm-sparkle--4 { top: 70%; right: 20%; animation-delay: 0.5s; background: rgba(155, 137, 180, 0.5); }

@keyframes rsvp-confirm-fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes rsvp-title-glow {
    0%, 100% { text-shadow: 0 0 10px rgba(201, 169, 110, 0.4), 0 0 20px rgba(201, 169, 110, 0.2), 1px 1px 2px rgba(28, 18, 9, 0.3); }
    50% { text-shadow: 0 0 15px rgba(201, 169, 110, 0.6), 0 0 30px rgba(201, 169, 110, 0.3), 1px 1px 2px rgba(28, 18, 9, 0.3); }
}

@keyframes rsvp-subtitle-fadein {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes rsvp-wreath-draw {
    0% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 0.7; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes rsvp-petal-drift {
    0% { opacity: 0; transform: translateY(0) rotate(0deg); }
    10% { opacity: 0.5; }
    90% { opacity: 0.2; }
    100% { opacity: 0; transform: translateY(calc(100vh)) rotate(180deg); }
}

@keyframes rsvp-seal-stamp {
    0% { opacity: 0; transform: scale(1.3); }
    60% { opacity: 1; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes rsvp-sparkle-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 0.8; transform: scale(1.3); }
}