/* =============================================
   RSVP Wedding – Frontend Styles
   ============================================= */

/* Default CSS variables (overridden inline per instance) */
#rsvp-wedding-wrap {
    --rsvp-bg-utama:       #fff8f0;
    --rsvp-bg-field:       #ffffff;
    --rsvp-border-field:   #e8d5c4;
    --rsvp-warna-teks:     #3d2b1f;
    --rsvp-warna-btn:      #c8956c;
    --rsvp-warna-btn-teks: #ffffff;
    --rsvp-font-family:    Georgia, serif;
    --rsvp-font-size:      15px;
    --rsvp-border-radius:  8px;

    /* Internal palette */
    --rsvp-shadow:         0 4px 20px rgba(0,0,0,0.08);
    --rsvp-transition:     0.25s ease;
    --rsvp-hadir-color:    #2ecc71;
    --rsvp-tidak-color:    #e74c3c;
    --rsvp-ragu-color:     #f39c12;
}

/* ---- Wrapper ---- */
.rsvp-wedding-wrap {
    font-family:    var(--rsvp-font-family);
    font-size:      var(--rsvp-font-size);
    color:          var(--rsvp-warna-teks);
    background:     var(--rsvp-bg-utama);
    border-radius:  var(--rsvp-border-radius);
    padding:        32px 24px;
    max-width:      680px;
    margin:         0 auto;
    box-sizing:     border-box;
}

/* ---- Form Container ---- */
.rsvp-form-container {
    background:    var(--rsvp-bg-field);
    border:        1px solid var(--rsvp-border-field);
    border-radius: var(--rsvp-border-radius);
    padding:       28px;
    box-shadow:    var(--rsvp-shadow);
    margin-bottom: 32px;
}

/* ---- Field Groups ---- */
.rsvp-field-group {
    margin-bottom: 18px;
}

.rsvp-label {
    display:       block;
    font-weight:   700;
    margin-bottom: 6px;
    font-size:     calc(var(--rsvp-font-size) * 0.93);
    color:         var(--rsvp-warna-teks);
    letter-spacing: 0.02em;
}

.rsvp-required {
    color:        #e74c3c;
    margin-left:  3px;
}

.rsvp-input,
.rsvp-textarea,
.rsvp-select {
    width:         100%;
    box-sizing:    border-box;
    background:    var(--rsvp-bg-field);
    border:        1.5px solid var(--rsvp-border-field);
    border-radius: calc(var(--rsvp-border-radius) * 0.75);
    padding:       10px 14px;
    font-family:   var(--rsvp-font-family);
    font-size:     var(--rsvp-font-size);
    color:         var(--rsvp-warna-teks);
    outline:       none;
    transition:    border-color var(--rsvp-transition), box-shadow var(--rsvp-transition);
    -webkit-appearance: none;
    appearance:    none;
}

.rsvp-input:focus,
.rsvp-textarea:focus,
.rsvp-select:focus {
    border-color: var(--rsvp-warna-btn);
    box-shadow:   0 0 0 3px rgba(200, 149, 108, 0.18);
}

.rsvp-input.rsvp-field-error,
.rsvp-textarea.rsvp-field-error,
.rsvp-select.rsvp-field-error {
    border-color: #e74c3c;
    box-shadow:   0 0 0 3px rgba(231, 76, 60, 0.12);
}

.rsvp-textarea {
    resize:      vertical;
    min-height:  100px;
    line-height: 1.6;
}

.rsvp-select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' 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;
}

/* ---- Status Message ---- */
.rsvp-message {
    border-radius: calc(var(--rsvp-border-radius) * 0.75);
    padding:       10px 14px;
    font-size:     calc(var(--rsvp-font-size) * 0.93);
    margin-bottom: 14px;
    animation:     rsvp-fade-in 0.3s ease;
}

.rsvp-message--success {
    background: #f0fdf4;
    border:     1px solid #86efac;
    color:      #16a34a;
}

.rsvp-message--error {
    background: #fef2f2;
    border:     1px solid #fca5a5;
    color:      #dc2626;
}

/* ---- Submit Button ---- */
.rsvp-btn-submit {
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           8px;
    width:         100%;
    background:    var(--rsvp-warna-btn);
    color:         var(--rsvp-warna-btn-teks);
    border:        none;
    border-radius: calc(var(--rsvp-border-radius) * 0.75);
    padding:       12px 24px;
    font-family:   var(--rsvp-font-family);
    font-size:     var(--rsvp-font-size);
    font-weight:   700;
    letter-spacing: 0.04em;
    cursor:        pointer;
    transition:    background var(--rsvp-transition), opacity var(--rsvp-transition), transform var(--rsvp-transition);
    margin-top:    4px;
}

.rsvp-btn-submit:hover {
    opacity:   0.88;
    transform: translateY(-1px);
}

.rsvp-btn-submit:active {
    transform: translateY(0);
}

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

/* ---- Spinner ---- */
.rsvp-spinner {
    width:  18px;
    height: 18px;
    animation: rsvp-spin 0.8s linear infinite;
}

/* ---- Entries Container ---- */
.rsvp-entries-container {
    margin-top: 8px;
}

.rsvp-entries-title {
    font-family: var(--rsvp-font-family);
    font-size:   calc(var(--rsvp-font-size) * 1.15);
    color:       var(--rsvp-warna-teks);
    margin:      0 0 16px;
    font-weight: 700;
    display:     flex;
    align-items: center;
    gap:         8px;
}

.rsvp-entries-count {
    font-size:   calc(var(--rsvp-font-size) * 0.85);
    font-weight: 400;
    opacity:     0.6;
}

.rsvp-entries-list {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.rsvp-no-entries {
    text-align: center;
    opacity:    0.5;
    padding:    24px 0;
    font-style: italic;
}

/* ---- Entry Card ---- */
.rsvp-entry-card {
    display:       flex;
    gap:           14px;
    background:    var(--rsvp-bg-field);
    border:        1px solid var(--rsvp-border-field);
    border-radius: var(--rsvp-border-radius);
    padding:       16px;
    box-shadow:    var(--rsvp-shadow);
    animation:     rsvp-fade-in 0.4s ease;
}

.rsvp-entry-card.rsvp-entry-new {
    animation: rsvp-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rsvp-entry-avatar {
    flex-shrink:   0;
    width:         42px;
    height:        42px;
    border-radius: 50%;
    background:    var(--rsvp-warna-btn);
    color:         var(--rsvp-warna-btn-teks);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     calc(var(--rsvp-font-size) * 1.2);
    font-weight:   700;
    font-family:   var(--rsvp-font-family);
    opacity:       0.85;
}

.rsvp-entry-content {
    flex: 1;
    min-width: 0;
}

.rsvp-entry-header {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
    margin-bottom: 6px;
}

.rsvp-entry-nama {
    font-size:   calc(var(--rsvp-font-size) * 1.05);
    font-weight: 700;
    color:       var(--rsvp-warna-teks);
}

.rsvp-entry-ucapan {
    margin:      0 0 6px;
    line-height: 1.65;
    font-size:   var(--rsvp-font-size);
    color:       var(--rsvp-warna-teks);
    word-break:  break-word;
}

.rsvp-entry-time {
    font-size: calc(var(--rsvp-font-size) * 0.82);
    opacity:   0.5;
    display:   block;
}

/* ---- Badges ---- */
.rsvp-badge {
    display:       inline-flex;
    align-items:   center;
    padding:       2px 10px;
    border-radius: 999px;
    font-size:     calc(var(--rsvp-font-size) * 0.8);
    font-weight:   700;
    letter-spacing: 0.02em;
    white-space:   nowrap;
}

.rsvp-badge--hadir {
    background: rgba(46, 204, 113, 0.15);
    color:      #16a34a;
    border:     1px solid rgba(46, 204, 113, 0.3);
}

.rsvp-badge--tidak-hadir {
    background: rgba(231, 76, 60, 0.12);
    color:      #dc2626;
    border:     1px solid rgba(231, 76, 60, 0.25);
}

.rsvp-badge--ragu {
    background: rgba(243, 156, 18, 0.15);
    color:      #b45309;
    border:     1px solid rgba(243, 156, 18, 0.3);
}

/* ---- Keyframes ---- */
@keyframes rsvp-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes rsvp-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes rsvp-slide-in {
    from {
        opacity:   0;
        transform: translateY(-16px) scale(0.97);
    }
    to {
        opacity:   1;
        transform: translateY(0) scale(1);
    }
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .rsvp-wedding-wrap {
        padding: 18px 12px;
    }
    .rsvp-form-container {
        padding: 18px 16px;
    }
    .rsvp-entry-avatar {
        width:  34px;
        height: 34px;
    }
}