/*
 * Public CSS for My Corner Ribbon (v1.2.0 - Dual Support)
 */

/* 1. Wrapper สำหรับ Hook มาตรฐาน (หน้าโพสเดี่ยว)
 * (ยังคงเก็บไว้ และทำงานเหมือนเดิม)
 */
.mcr-wrapper {
    position: relative;
    display: inline-block; 
    overflow: hidden;
    line-height: 0;
}

/* START: MCR-FIX-11-DUAL-SUPPORT (เพิ่ม Selector ทั้ง category- และ tag-) */
/*
 * 2. Wrapper สำหรับ JS Injection (หน้า Elementor / Loop)
 * - JS ของเราจะแปะริบบิ้นเข้าไปใน <article class="... category-slug ...">
 * หรือ <article class="... tag-slug ...">
 * - เราจึงต้องทำให้ <article> นั้นเป็น 'position: relative'
 */
article[class*="category-"],
article[class*="tag-"] {
    position: relative;
}
/* END: MCR-FIX-11-DUAL-SUPPORT */


/* 3. ตัวริบบิ้น (Ribbon Container) - ใช้ร่วมกัน
 * (สไตล์มาตรฐาน)
 */
.mcr-ribbon-container {
    position: absolute;
    z-index: 9;
    /* background-color: #d9534f; */ /* ลบพื้นหลังสีแดงออก */
    color: white;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.2); */ /* ลบเงาออก */
    padding: 0; 
    width: auto; 
    height: auto;
    line-height: 1; 
    overflow: visible; 
}

/* 4. เนื้อหาข้างใน (สำหรับรูปภาพ) */
.mcr-ribbon-content img {
    display: block;
    max-width: 50px; 
    max-height: 50px;
    width: auto; 
    height: auto; 
    object-fit: contain; 
}

/* --- 5. การจัดวาง 4 มุม (ปรับระยะห่างเป็น 5px) --- */

/* บน-ขวา */
.mcr-ribbon-container.top-right {
    top: 5px;   
    right: 5px; 
    transform: none; 
}

/* บน-ซ้าย */
.mcr-ribbon-container.top-left {
    top: 5px;   
    left: 5px;  
    transform: none; 
}

/* ล่าง-ขวา (แบบแบน) */
.mcr-ribbon-container.bottom-right {
    top: auto;
    bottom: 5px;  
    right: 5px;   
    transform: none;
    width: auto;
    padding: 0; 
    border-radius: 3px;
}

/* ล่าง-ซ้าย (แบบแบน) */
.mcr-ribbon-container.bottom-left {
    top: auto;
    bottom: 5px;  
    left: 5px;    
    transform: none;
    width: auto;
    padding: 0; 
    border-radius: 3px;
}