/* ======================================= */
/* 1. STYLING UNTUK FORM RSVP (Revisi Warna Netral & Layout) */
/* ======================================= */

#rsvp form {
    max-width: 500px;
    margin: 0 auto 40px;
    padding: 20px;
    background-color: var(--background-light, #f8f8f8);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

#rsvp form input[type="text"],
#rsvp form textarea,
#rsvp form select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    transition: border-color 0.3s;
}

#rsvp form input[type="text"]:focus,
#rsvp form textarea:focus,
#rsvp form select:focus {
    border-color: #666; /* Netral, Hitam ke Abu-abuan */
    outline: none;
}

#rsvp form textarea {
    resize: vertical;
    min-height: 100px;
}

/* KOREKSI 1: Tombol Submit diubah ke Netral */
#rsvp form button[type="submit"] {
    display: inline-block;      /* tidak full width */
    width: auto;                /* lebar mengikuti konten */
    padding: 10px 26px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 8px;        /* lebih elegan */
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

/* pastikan form tidak center tombol */
#rsvp form {
    text-align: left;
}

#rsvp form button[type="submit"]:hover {
    background-color: #555; /* Sedikit lebih terang saat hover */
    
}

#rsvp form button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Styling untuk pesan status */
.status-message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
}

.status-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ======================================= */
/* 2. STYLING UNTUK DAFTAR UCAPAN (Revisi Ramping & Scroll) */
/* ======================================= */

#rsvpListContainer { /* Wadah baru untuk fitur Scroll */
    max-width: 700px;
    margin: 20px auto 0;
}

/* KOREKSI 5: Batasan tinggi dan fitur scroll */
#rsvpList {
    max-height: 400px; /* Batasan tinggi (sesuaikan jika perlu) */
    overflow-y: auto; /* Aktifkan scrolling vertikal */
    padding-right: 15px; /* Tambahkan padding agar scrollbar tidak menempel */
    margin-top: 20px;
}

/* KOREKSI 4: Card lebih ramping dan border kiri dihapus */
.ucapan-card {
    background-color: white;
    padding: 10px 15px; /* Padding dikurangi */
    border-radius: 8px; /* Radius sedikit dikurangi */
    margin-bottom: 10px; /* Margin dikurangi */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    /* border-left dihapus */
}

.ucapan-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding-bottom: 3px;
    border-bottom: 1px dashed #eee;
}

.ucapan-card strong {
    font-size: 15px; /* Ukuran font disesuaikan */
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    color: var(--text-color, #333);
}

/* KOREKSI 3: Komen rata kiri */
.ucapan-card .ucapan-text {
    margin: 8px 0;
    line-height: 1.5;
    font-size: 14px;
    color: #555;
    text-align: left; /* Rata kiri */
}

.ucapan-card small {
    display: block;
    text-align: right;
    font-size: 10px;
    color: #888;
}

/* ======================================= */
/* 3. STYLING STATUS KEHADIRAN (FINAL) */
/* ======================================= */

.kehadiran-status {
    /* Gunakan inline-flex untuk tampilan horizontal yang solid */
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    
    /* Dimensi & Style Dasar */
    padding: 3px 8px;
    border-radius: 20px; 
    font-size: 12px;
    font-weight: 600;
    color: white; 
    line-height: 1.2; 
    
    /* Tata Letak */
    margin-left: 10px;
    white-space: nowrap; 
    flex-shrink: 0; /* Penting: mencegah elemen menyusut */
    height: 22px; /* Memberikan tinggi minimum */
}

/* Status Hadir: Hijau */
.status-Hadir {
    background-color: #4CAF50; 
}

/* Status TidakHadir: Merah */
.status-TidakHadir {
    background-color: #F44336; 
}

/* Status MasihRagu: Kuning/Orange */
.status-MasihRagu {
    background-color: #FFC107; 
    color: #333; 
}

/* ======================================= */
/* 4. STYLING TOTAL UCAPAN */
/* ======================================= */
#totalUcapanCount {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 500px;
    margin: 0 auto 15px;
    font-size: 16px;
    font-style: italic; /* Italic */
    font-weight: bold; /* Bold */
    color: #333;
}

#totalUcapanCount i {
    margin-right: 8px;
    font-size: 18px;
    color: #666; /* Warna ikon netral */
}