/* Container Background */
.fb-style-blog {
    background-color: #f0f2f5;
    padding: 20px 10px;
    max-width: 600px; 
    margin: 0 auto;
}

/* Card Design */
.fb-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    border: 1px solid #dddfe2;
    overflow: hidden;
}

.fb-card-header { display: flex; align-items: center; padding: 12px; }
.user-avatar img { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; object-fit: cover; }
.user-info { display: flex; flex-direction: column; }
.user-name { font-weight: bold; color: #050505; font-size: 15px; text-decoration: none; }
.post-date { font-size: 12px; color: #65676b; }

.fb-card-content { padding: 4px 12px 10px; font-size: 15px; color: #050505; line-height: 1.4; }

.fb-card-title { padding: 0 12px 10px; }
.fb-card-title h3 { margin: 0; font-size: 18px; color: #1c1e21; }
.fb-card-title a { text-decoration: none; color: inherit; }

/* Image Styling */
.fb-card-image img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    display: block;
}

/* --- Footer Buttons (Fixing the mess) --- */
.fb-card-footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #ebedf0;
    margin: 0 12px;
    padding: 4px 0;
    position: relative; /* রিঅ্যাকশন প্যানেলের পজিশন ঠিক রাখতে */
}

/* প্রতিটি বাটন সেকশন (Like, Comment, Share) */
.footer-action-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn, .fb-btn {
    background: none;
    border: none;
    width: 100%;
    padding: 8px;
    color: #65676b;
    font-weight: 600;
    cursor: pointer;
    font-size: 18px; /* আইকন সাইজ */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    border-radius: 4px;
}

/*.action-btn:hover, .fb-btn:hover { */
/*    background-color: #f2f2f2; */
/*}*/

/* লাইক অ্যাক্টিভ নীল রঙ */
.like-btn.active {
    color: #1877f2 !important;
}

/* রিঅ্যাকশন প্যানেলটি বাটনের ঠিক উপরে রাখার জন্য */
.reaction-container {
    position: relative;
}

/* Mobile View adjustments */
@media (max-width: 600px) {
    .fb-style-blog { padding: 10px 0; }
    .fb-card { border-radius: 0; border-left: none; border-right: none; }
    .action-btn, .fb-btn { font-size: 16px; padding: 10px 0; }
}


/*-------------------like button css start here----------------------------------------*/

/* কন্টেইনার এবং প্যানেল সেটআপ */
.reaction-container { 
    position: relative; 
    display: inline-block; 
}

.emoji-panel {
    display: none; /* শুরুতে ইনভিজিবল */
    position: absolute;
    bottom: 60px; /* বাটনের উপরে গ্যাপ */
    left: 0;
    background: #ffffff;
    padding: 12px 18px;
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    gap: 15px;
    z-index: 1000;
    align-items: center;
    border: 1px solid #f0f0f0;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* জাভাস্ক্রিপ্ট কল করলে এটি ফ্লেক্স হবে */
.emoji-panel[style*="display: flex"] {
    display: flex !important;
}

/* ফন্ট অসাম আইকন ও ইমোজির সাইজ */
.emoji-panel span, .react-icon {
    font-size: 32px; /* ইমোজি বড় দেখাবে */
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    line-height: 1;
}

/* হোভার করলে আরও বড় হয়ে উপরে উঠবে */
.emoji-panel span:hover, .react-icon:hover {
    transform: scale(1.5) translateY(-10px);
}

/* ফেসবুক স্টাইল কালার কোড */
.react-icon.like, .emoji-panel .like { color: #1877f2; }
.react-icon.love, .emoji-panel .love { color: #f33e58; }
.react-icon.haha, .emoji-panel .haha { color: #f7b125; }
.react-icon.wow, .emoji-panel .wow { color: #f7b125; }
.react-icon.sad, .emoji-panel .sad { color: #f7b125; }

/* লাইক বাটন ডিজাইন (টেক্সট ছাড়া) */
.like-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: #65676b;
    padding: 10px;
    transition: all 0.2s ease;
    border-radius: 50%;
}

.like-btn:hover {
    background-color: #f2f2f2;
}

.like-btn.active { 
    color: #1877f2 !important; 
}

/* পপ-ইন অ্যানিমেশন */
@keyframes popIn { 
    from { transform: scale(0.5) translateY(20px); opacity: 0; } 
    to { transform: scale(1) translateY(0); opacity: 1; } 
}

/* রিঅ্যাকশন স্ট্যাটাস */
.reaction-stats { 
    font-size: 13px; 
    color: #65676b; 
    margin-top: 8px; 
    font-weight: 500;
}


/*-------------------like button css end here----------------------------------------*/



/*------------- share popup (Bottom Sheet Style) -------------------*/
.share-modal {
    display: none; 
    position: fixed;
    z-index: 999999999;
    left: 0; 
    top: 0;
    width: 100%; 
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px); /* হালকা ব্লার ইফেক্ট */
}

.share-modal-content {
    background-color: #fff;
    position: absolute;
    bottom: 0; /* মোবাইলে নিচে থাকবে */
    left: 50%;
    transform: translateX(-50%);
    padding: 30px 20px;
    border-radius: 25px 25px 0 0; /* উপরের কোণা গোল */
    width: 100%;
    max-width: 100%; /* মোবাইলে ফুল উইডথ */
    text-align: center;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.2);
    animation: slideUp 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* নিচ থেকে উপরে ওঠার অ্যানিমেশন */
@keyframes slideUp {
    from { transform: translate(-50%, 100%); }
    to { transform: translate(-50%, 0); }
}

.share-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* এক লাইনে ৫টি করে আইকন */
    gap: 15px;
    margin-top: 25px;
    justify-items: center;
}

.round-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

.round-icon:hover { 
    transform: scale(1.1); 
    filter: brightness(1.1); 
}

/* সোশ্যাল ব্র্যান্ড কালারস */
.fb { background: #1877F2; }
.msg { background: #0084FF; }
.wa { background: #25D366; }
.x-twitter { background: #000000; }
.ln { background: #0A66C2; }
.pin { background: #E60023; }
.tg { background: #229ED9; }
.red { background: #FF4500; }
.mail { background: #848484; }
.copy { background: #333; }

/* মোবাইল এবং ডেস্কটপ রেসপন্সিভনেস */
@media (max-width: 480px) {
    .share-grid { grid-template-columns: repeat(4, 1fr); } /* ছোট মোবাইলে ৪টি */
    .round-icon { width: 45px; height: 45px; font-size: 20px; }
}

@media (min-width: 768px) {
    .share-modal-content {
        bottom: 50%; /* ডেস্কটপে মাঝখানে */
        transform: translate(-50%, 50%);
        border-radius: 20px;
        width: 350px;
        animation: popIn 0.3s ease;
    }
}

@keyframes popIn {
    from { transform: translate(-50%, 50%) scale(0.8); opacity: 0; }
    to { transform: translate(-50%, 50%) scale(1); opacity: 1; }
}