/* ============================================================
   GLOBAL UCAPAN STYLING
   Berlaku untuk semua template undangan (demo 1–8)
   ============================================================ */

.comments-area {
    max-height: 520px;
    overflow-y: auto;
    scroll-behavior: smooth;
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.comment {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    animation: fadeIn 0.4s ease;
}

.comments-area .comments {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.comment:last-child {
    border-bottom: none;
}

/* Avatar */
.comment .comment-image img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f2f2f2;
}

/* Isi komentar */
.comment .comment-main-area {
    flex: 1;
}

.comment .comments-meta h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #222;
}

.comment .comment-area p {
    font-size: 14px;
    color: #555;
    margin-bottom: 0;
    line-height: 1.4;
}

/* Badge kehadiran */
.comment .badge {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    vertical-align: middle;
}

/* Animasi */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scrollbar */
.comments-area::-webkit-scrollbar {
    width: 6px;
}
.comments-area::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.comments-area::-webkit-scrollbar-track {
    background: transparent;
}

/* ============================================================
   KHUSUS PER DEMO
   ============================================================ */

/* ===== DEMO 1 – Nuansa Merah Lembut ===== */
.ucapan-wrapper.demo-1 .comments-area {
    background: #fff8f8;
    border: 1px solid #fbe4e4;
    box-shadow: 0 4px 12px rgba(255, 150, 150, 0.1);
}
.ucapan-wrapper.demo-1 .comments-meta h4 {
    color: #c75c5c;
}
.ucapan-wrapper.demo-1 .comment .comment-image img {
    border-color: #ffd4d4;
}

/* ===== DEMO 2 – Nuansa Hijau Pastel ===== */
.ucapan-wrapper.demo-2 .comments-area {
    background: #f7fff9;
    border: 1px solid #d9f3e0;
    box-shadow: 0 4px 12px rgba(91, 182, 129, 0.1);
}
.ucapan-wrapper.demo-2 .comments-meta h4 {
    color: #3b955f;
}
.ucapan-wrapper.demo-2 .comment .comment-image img {
    border-color: #bdebc8;
}

/* ===== DEMO 3 – Nuansa Biru Tenang ===== */
.ucapan-wrapper.demo-3 .comments-area {
    background: #9ac093;
    border: 1px solid #96c98d;
    box-shadow: 0 4px 12px rgba(86, 145, 255, 0.1);
}
.ucapan-wrapper.demo-3 .comments-meta h4 {
    color: #a6cf9e;
}
.ucapan-wrapper.demo-3 .comment .comment-image img {
    border-color: #c8e0ff;
}

/* ===== DEMO 4 – Nuansa Ungu Elegan ===== */
.ucapan-wrapper.demo-4 .comments-area {
    background: rgb(182, 121, 93);
    border: 1px solid #e5d9ff;
    box-shadow: 0 4px 12px rgba(128, 90, 213, 0.1);
}
.ucapan-wrapper.demo-4 .comments-meta h4 {
    color: #7b4fc4;
}
.ucapan-wrapper.demo-4 .comment .comment-image img {
    border-color: #d6c0ff;
}

/* ===== DEMO 5 – Nuansa Emas & Putih ===== */
.ucapan-wrapper.demo-5 .comments-area {
    background: #f1c4bf;
    border: 1px solid #f1c4bf;
    box-shadow: 0 4px 12px rgba(221, 173, 64, 0.1);
}
.ucapan-wrapper.demo-5 .comments-meta h4 {
    color: #b88a1c;
}
.ucapan-wrapper.demo-5 .comment .comment-image img {
    border-color: #f2d37b;
}

/* ===== DEMO 6 – Nuansa Pink Mewah ===== */
.ucapan-wrapper.demo-6 .comments-area {
    background: #fff7fa;
    border: 1px solid #f8d9e4;
    box-shadow: 0 4px 12px rgba(255, 128, 180, 0.1);
}
.ucapan-wrapper.demo-6 .comments-meta h4 {
    color: #d04f88;
}
.ucapan-wrapper.demo-6 .comment .comment-image img {
    border-color: #ffc1d9;
}

/* ===== DEMO 7 – Nuansa Krem Lembut ===== */
.ucapan-wrapper.demo-7 .comments-area {
    background: #fffaf4;
    border: 1px solid #f5e1c8;
    box-shadow: 0 4px 12px rgba(214, 174, 104, 0.1);
}
.ucapan-wrapper.demo-7 .comments-meta h4 {
    color: #a5742c;
}
.ucapan-wrapper.demo-7 .comment .comment-image img {
    border-color: #f3d1a1;
}

/* ===== DEMO 8 – Nuansa Tosca Cerah ===== */
.ucapan-wrapper.demo-8 .comments-area {
    background: #f5fffc;
    border: 1px solid #c8f2eb;
    box-shadow: 0 4px 12px rgba(64, 202, 173, 0.1);
}
.ucapan-wrapper.demo-8 .comments-meta h4 {
    color: #a5f1de;
}
.ucapan-wrapper.demo-8 .comment .comment-image img {
    border-color: #c8a898;
}

/* === Styling untuk setiap ucapan === */
.comments li.comment {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 15px 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    transition: all 0.3s ease;
}

.comments li.comment:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Avatar */
.comments li.comment .comment-image {
    flex-shrink: 0;
    margin-right: 14px;
}

.comments li.comment .comment-image img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0f0f0;
}

/* Nama dan kehadiran */
.comments li.comment .comments-meta h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: #333;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Teks ucapan */
.comments li.comment .comment-area p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* 📱 Responsive: di layar kecil, font lebih besar sedikit */
@media (max-width: 576px) {
    .comments li.comment .comment-area p {
        font-size: 1.05rem;
    }
    .comments li.comment {
        padding: 12px 14px;
    }
    .comments li.comment .comment-image img {
        width: 42px;
        height: 42px;
    }
}