/* ===========================================================================
 * assets/css/bday-greeting.css
 * ---------------------------------------------------------------------------
 * การ์ดอวยพรวันเกิดส่วนตัว (แชทการ์ดร่วม · 26 ส.ค. 2569)
 *
 * ตั้งใจให้ "พอร์ตเบิล" ใช้ได้ทุก layout (M HUB / ฟีด / โปรไฟล์ / ลานสนทนา)
 * จึงไม่พึ่ง .hub-feed-card หรือ grid ใด ๆ ของหน้าเฉพาะ — เป็น block กว้างเต็ม
 * ที่วางบนสุดของฟีดเนื้อหาได้เลยตามสเปก ("ขึ้นบนสุดของฟีดเนื้อหา")
 *
 * โทนสี "ผู้ประกาศ" ยกจาก .hub-announcer-card (assets/css/hub.css) แต่ปรับ
 * ให้กว้างเต็มบรรทัดแทนที่จะเป็น flex-item เล็ก ๆ ในกริดผสม
 * =========================================================================== */
.bday-greeting-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 0 12px;
    border-radius: var(--radius, 14px);
    border: 1px solid var(--gold-dim, rgba(212, 175, 55, .35));
    background: rgba(212, 175, 55, .08);
}

.bgc-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    /* [กันเว็บช้า] ไม่ใช้ CSS animation วนตลอดเวลา — โยกทีเดียวตอนโผล่จอ
       แล้วหยุด กันการ์ดวันเกิดกลายเป็นตัวกินแบตบนมือถือถ้าเปิดค้างไว้นาน */
    animation: bgc-pop .5s ease-out;
}
@keyframes bgc-pop {
    0%   { transform: scale(.4) rotate(-15deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(8deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.bgc-text {
    font-size: .88rem;
    color: var(--text, #eee);
    line-height: 1.5;
}

@media (max-width: 480px) {
    .bday-greeting-card { padding: 12px; gap: 10px; }
    .bgc-icon { font-size: 1.2rem; }
    .bgc-text { font-size: .82rem; }
}