/* RSVP Undangan v3 */
.rsvp-wrap { width:100%; max-width:520px; margin:0 auto; font-family:inherit; color:#3d2b1f; }

/* Form */
.rsvp-form-section { padding:4px 0 16px; }
.rsvp-field { margin-bottom:16px; }
.rsvp-field label { display:block; font-size:13px; font-weight:600; color:#5a4035; margin-bottom:6px; }
.rsvp-required { color:#c0392b; }
.rsvp-wrap .rsvp-field input[type="text"],
.rsvp-wrap .rsvp-field input[type="tel"],
.rsvp-wrap .rsvp-field select,
.rsvp-wrap .rsvp-field textarea {
    width:100% !important; box-sizing:border-box !important;
    padding:10px 14px !important; border:1px solid #d5c9c0 !important;
    border-radius:8px !important; font-size:14px !important;
    color:#3d2b1f !important; background:#fffaf7 !important;
    outline:none !important; transition:border-color .2s,box-shadow .2s;
    font-family:inherit !important; -webkit-appearance:none; appearance:none;
}
.rsvp-wrap .rsvp-field input[type="text"]:focus,
.rsvp-wrap .rsvp-field input[type="tel"]:focus,
.rsvp-wrap .rsvp-field select:focus,
.rsvp-wrap .rsvp-field textarea:focus {
    border-color:#c8976e !important;
    box-shadow:0 0 0 3px rgba(200,151,110,.15) !important;
}
.rsvp-field select {
    appearance:none; -webkit-appearance:none;
    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' stroke='%239b7b5a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; cursor:pointer;
}
.rsvp-field textarea { resize:vertical; min-height:90px; }

/* Phone */
.rsvp-phone-wrap { display:flex; gap:8px; align-items:stretch; position:relative; }
.rsvp-phone-flag {
    flex-shrink:0; padding:10px 12px; border:1px solid #d5c9c0; border-radius:8px;
    background:#f5ede6; font-size:13px; color:#7a5c4a; cursor:pointer;
    display:flex; align-items:center; gap:4px; white-space:nowrap; user-select:none;
}
.rsvp-phone-flag:hover { background:#ede3d8; }
.rsvp-phone-arrow { font-size:10px; color:#9b7b5a; }
.rsvp-phone-dropdown {
    position:absolute; top:100%; left:0; z-index:999; background:#fff;
    border:1px solid #d5c9c0; border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.1);
    min-width:160px; max-height:200px; overflow-y:auto; margin-top:4px;
}
.rsvp-phone-option { padding:8px 12px; cursor:pointer; font-size:13px; color:#3d2b1f; }
.rsvp-phone-option:hover { background:#f5ede6; }
.rsvp-phone-wrap input[type="tel"] { flex:1; }

/* Button */
.rsvp-btn-submit {
    width:100%; padding:13px; background:#c8976e; color:#fff; border:none;
    border-radius:30px; font-size:15px; font-weight:600; cursor:pointer;
    transition:background .2s,transform .1s; letter-spacing:.3px; font-family:inherit;
}
.rsvp-btn-submit:hover { background:#b5845c; }
.rsvp-btn-submit:active { transform:scale(.98); }
.rsvp-btn-submit:disabled { background:#d5c9c0; cursor:not-allowed; }

/* Notice */
.rsvp-notice { padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:14px; }
.rsvp-notice.success { background:#d4edda; color:#2d6a4f; }
.rsvp-notice.error   { background:#f8d7da; color:#842029; }

/* Divider */
.rsvp-divider { height:1px; background:#e8ddd5; margin:20px 0; }

/* Feed */
.rsvp-feed-header { font-size:13px; color:#7a5c4a; margin-bottom:16px; }
.rsvp-total-count { color:#c8976e; }
.rsvp-feed-list {
    display:flex;
    flex-direction:column;
    max-height:420px;
    overflow-y:auto;
    scroll-behavior:smooth;
    padding-right:4px;
}

/* Scrollbar styling */
.rsvp-feed-list::-webkit-scrollbar { width:4px; }
.rsvp-feed-list::-webkit-scrollbar-track { background:transparent; }
.rsvp-feed-list::-webkit-scrollbar-thumb { background:#d5c9c0; border-radius:4px; }
.rsvp-feed-list::-webkit-scrollbar-thumb:hover { background:#c8976e; }

/* Item */
.rsvp-item { display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-bottom:1px solid #f0e8e0; }
.rsvp-item:first-child { padding-top:0; }
.rsvp-item:last-child  { border-bottom:none; }

/* Animations */
.rsvp-anim-fadeslide .rsvp-item { animation:rsvpFadeSlide .35s ease both; }
.rsvp-anim-fade      .rsvp-item { animation:rsvpFade .35s ease both; }
.rsvp-anim-slide     .rsvp-item { animation:rsvpSlide .35s ease both; }

@keyframes rsvpFadeSlide { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes rsvpFade      { from{opacity:0} to{opacity:1} }
@keyframes rsvpSlide     { from{transform:translateY(12px)} to{transform:none} }

/* Avatar */
.rsvp-avatar { flex-shrink:0; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; text-transform:uppercase; }

/* Content */
.rsvp-item-body { flex:1; min-width:0; }
.rsvp-item-header { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
.rsvp-nama     { font-weight:700; font-size:14px; color:#3d2b1f; }
.rsvp-grup     { font-size:11px; color:#b0a09a; font-style:italic; }
.rsvp-komentar { font-size:13px; color:#5a4035; line-height:1.55; margin-bottom:4px; word-break:break-word; }
.rsvp-waktu    { font-size:11px; color:#c0b0aa; }

/* Badges */
.rsvp-badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.rsvp-badge--hadir       { background:#d4edda; color:#2d6a4f; }
.rsvp-badge--tidak-hadir { background:#f8d7da; color:#842029; }
.rsvp-badge--ragu        { background:#fff3cd; color:#664d03; }

/* Empty */
.rsvp-empty { text-align:center; padding:28px 0; font-size:14px; color:#b0a09a; font-style:italic; }

/* Responsive */
@media(max-width:480px) {
    .rsvp-avatar { width:34px; height:34px; font-size:11px; }
    .rsvp-nama   { font-size:13px; }
}

/* ── Scrollable Feed ──────────────────────────────────────────────── */
.rsvp-feed-scroll {
    scrollbar-width: thin;
    scrollbar-color: #d5c9c0 transparent;
    padding-right: 6px;
}
.rsvp-feed-scroll::-webkit-scrollbar {
    width: 4px;
}
.rsvp-feed-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.rsvp-feed-scroll::-webkit-scrollbar-thumb {
    background: #d5c9c0;
    border-radius: 4px;
}
.rsvp-feed-scroll::-webkit-scrollbar-thumb:hover {
    background: #c8976e;
}