/* ========================================
   Floating Buttons Layout - Simple PSU Icon
   จัดการตำแหน่งปุ่มลอยทั้งหมด
   ======================================== */

/* ============================================
   PSU Floating Icon - Simple Version
   ============================================ */
.psu-floating-icon {
    position: fixed;
    right: 23px;
    bottom: 100px;
    z-index: 9996;
    width: 60px;
    height: 60px;
}

.psu-floating-icon a {
    display: block;
    width: 100%;
    height: 100%;
    background: #003b71;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 59, 113, 0.4);
    transition: all 0.3s ease;
    animation: psu-pulse 2s infinite;
    padding: 8px;
}

.psu-floating-icon a:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(0, 59, 113, 0.6);
}

.psu-floating-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Pulse Animation */
@keyframes psu-pulse {
    0% {
        box-shadow: 0 4px 20px rgba(0, 59, 113, 0.4);
    }
    50% {
        box-shadow: 0 4px 30px rgba(0, 59, 113, 0.6);
    }
    100% {
        box-shadow: 0 4px 20px rgba(0, 59, 113, 0.4);
    }
}

/* ============================================
   Contact Button Position
   ============================================ */
.floating-contact-btn {
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 9998;
}

.floating-contact-menu {
    position: fixed;
    bottom: 160px;
    right: 20px;
    z-index: 9997;
}

/* ============================================
   Scroll Top Button Position
   ============================================ */
.scroll-top,
#scroll-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9995;
}

/* ============================================
   Layout Vertical Stack (Default)
   ============================================ */
/* ตำแหน่งเริ่มต้น:
   [PSU Icon]    - 250px (บนสุด)
   [Contact]     - 90px  (กลาง)
   [Scroll Top]  - 20px  (ล่างสุด)
*/

/* ============================================
   Responsive Design
   ============================================ */

/* Tablet */
@media (max-width: 992px) {
    .psu-floating-icon {
        width: 58px;
        height: 58px;
        right: 20px;
        bottom: 240px;
    }
    
    .floating-contact-btn {
        right: 18px;
        bottom: 85px;
    }
    
    .floating-contact-menu {
        right: 18px;
        bottom: 152px;
    }
    
    .scroll-top {
        right: 18px;
        bottom: 18px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .psu-floating-icon {
        width: 55px;
        height: 55px;
        right: 15px;
        bottom: 220px;
    }
    
    .floating-contact-btn {
        right: 15px;
        bottom: 80px;
    }
    
    .floating-contact-menu {
        right: 15px;
        bottom: 145px;
    }
    
    .scroll-top {
        right: 15px;
        bottom: 15px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .psu-floating-icon {
        width: 50px;
        height: 50px;
        right: 12px;
        bottom: 200px;
    }
    
    .floating-contact-btn {
        right: 12px;
        bottom: 75px;
    }
    
    .floating-contact-menu {
        right: 12px;
        bottom: 135px;
    }
    
    .scroll-top {
        right: 12px;
        bottom: 12px;
    }
}

/* ============================================
   Hide on Print
   ============================================ */
@media print {
    .psu-floating-icon,
    .floating-contact-btn,
    .floating-contact-menu,
    .scroll-top {
        display: none !important;
    }
}

/* ============================================
   Smooth Transitions
   ============================================ */
.psu-floating-icon,
.floating-contact-btn,
.scroll-top {
    transition: all 0.3s ease;
}

/* ============================================
   Accessibility
   ============================================ */
.psu-floating-icon a:focus,
.floating-contact-btn:focus,
.scroll-top:focus {
    outline: 3px solid #003b71;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .psu-floating-icon a,
    .floating-contact-btn,
    .scroll-top {
        animation: none !important;
        transition: none !important;
    }
    
    .psu-floating-icon a:hover,
    .floating-contact-btn:hover,
    .scroll-top:hover {
        transform: none !important;
    }
}

/* ============================================
   High Contrast Mode Support
   ============================================ */
@media (prefers-contrast: high) {
    .psu-floating-icon a,
    .floating-contact-btn,
    .scroll-top {
        border: 2px solid white;
    }
}

/* ============================================
   Z-Index Management
   ============================================ */
/* 
จัดลำดับ z-index ของปุ่มทั้งหมด:
- floating-contact-btn: 9998 (สูงสุด)
- floating-contact-menu: 9997
- psu-floating-icon: 9996
- scroll-top: 9995 (ต่ำสุด)
*/

.floating-contact-btn { z-index: 9998; }
.floating-contact-menu { z-index: 9997; }
.psu-floating-icon { z-index: 100; }
.scroll-top { z-index: 9995; }

/* ============================================
   Optional: Hide buttons on scroll down
   ============================================ */
body.scrolling-down .psu-floating-icon,
body.scrolling-down .floating-contact-btn {
    transform: translateY(100px);
    opacity: 0;
    pointer-events: none;
}

/* ============================================
   End of Floating Buttons Layout
   ============================================ */