/* ---------------------------------------------------- */
/* 2. Floating Contact Wrapper */
/* ---------------------------------------------------- */
#floating-contact-wrapper {
    position: fixed; /* ทำให้ลอยอยู่บนหน้าจอ */
    bottom: 25px;    /* ระยะห่างจากขอบล่าง */
    right: 25px;     /* ระยะห่างจากขอบขวา */
    z-index: 1000;   /* ให้อยู่เหนือองค์ประกอบอื่น */
    display: flex;   /* จัดเรียงไอคอนย่อยในแนวตั้ง */
    flex-direction: column-reverse; /* เรียงจากล่างขึ้นบน */
    align-items: center; /* จัดให้อยู่กึ่งกลางในแนวนอน */
}

/* ---------------------------------------------------- */
/* 2.1 Main Contact Icon */
/* ---------------------------------------------------- */
#main-contact-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* ทำให้เป็นวงกลม */
    background-color: #337ab7; /* สีน้ำเงินสำหรับปุ่มหลัก */
    color: white;
    font-size: 24px;
    line-height: 60px; /* จัดไอคอนให้อยู่กึ่งกลางแนวตั้ง */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.3s ease; /* เพิ่ม Animation ตอนคลิก */
    margin-top: 10px; /* ระยะห่างจากไอคอนย่อยด้านบน */
}

#main-contact-icon:hover {
    transform: scale(1.05);
    background-color: #286090;
}

/* เมื่อปุ่มหลักถูกคลิก (ใช้ Class ที่ JS จะเพิ่ม) */
#main-contact-icon.open {
    transform: rotate(45deg); /* หมุนไอคอน (เช่น ถ้าใช้เครื่องหมายบวก) */
    background-color: #dc3545; /* เปลี่ยนสีเมื่อเปิด */
}

/* ---------------------------------------------------- */
/* 2.2 Sub Contact Icons (ปุ่มย่อย) */
/* ---------------------------------------------------- */
#sub-contact-icons {
    /* ใช้ JS ควบคุมการแสดงผล (height/opacity) แทน display:none */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden; /* ซ่อนส่วนที่เกินขอบ */
    height: 0;       /* กำหนดความสูงเริ่มต้นเป็น 0 (ถูกซ่อน) */
    opacity: 0;      /* กำหนดความทึบเริ่มต้นเป็น 0 (ถูกซ่อน) */
    transition: height 0.4s ease-out, opacity 0.4s ease-out; 
}

/* คลาสที่ JS จะเพิ่มเมื่อต้องการแสดงปุ่มย่อย */
#sub-contact-icons.show {
    height: auto; /* กำหนด height เป็น auto เพื่อให้เห็นปุ่มย่อย */
    opacity: 1;
}

.sub-icon {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: white;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px; /* ระยะห่างระหว่างไอคอนย่อย */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.sub-icon:hover {
    transform: scale(1.1);
}

/* กำหนดสีสำหรับแต่ละแพลตฟอร์ม */
.facebook-icon {
    background-color: #3b5998;
}

.line-icon {
    background-color: #00b900;
}

.phone-icon {
    background-color: #28a745;
}