﻿
/* Accessibility & Performance */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .twinkle-star,
    .footer-star,
    .mystical-card-icon {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mystical-card,
    .zodiac-card {
        border-width: 2px;
    }

    .btn-standard,
    .btn-mystical {
        border: 2px solid currentColor;
    }
}

/* Print optimizations */
@media print {
    .stars-in-section,
    .footer-floating-stars,
    .mystical-watermark,
    .navbar-cosmic-indicator {
        display: none !important;
    }

    .prophecy-container,
    .mystical-card {
        page-break-inside: avoid;
        margin-bottom: 0.5rem;
    }
}
/* ==========================================================================
   FOOTER RESPONSIVE FIX - แก้ไขปัญหา Footer ไม่ Responsive
   ========================================================================== */

/* Footer Bottom Section - ปรับปรุงให้ responsive */
.footer-bottom {
    border-top: 1px solid rgba(255,215,0,.1);
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: clamp(10px, 2vw, 15px) 0;
    gap: clamp(10px, 2vw, 15px);
}

/* Footer Legal Container - ปรับให้ยืดหยุ่น */
.footer-legal-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(8px, 2vw, 15px);
    justify-content: center;
    width: 100%;
}

/* Copyright Text - ปรับขนาดฟอนต์ */
.copyright-text {
    color: rgba(255,255,255,.8);
    font-size: clamp(0.7rem, 1.8vw, 0.9rem);
    margin: 0;
    text-align: center;
    line-height: 1.4;
}

/* Footer Legal Links - ปรับให้ responsive */
.footer-legal-link {
    color: rgba(255,255,255,.8);
    text-decoration: none;
    transition: color .3s ease;
    font-size: clamp(0.7rem, 1.6vw, 0.85rem);
    padding: clamp(4px, 1vw, 8px) clamp(6px, 1.5vw, 10px);
    border-radius: 4px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    min-height: 36px; /* Touch-friendly */
}

    .footer-legal-link:hover {
        color: #ffd700;
        text-decoration: none;
        background-color: rgba(255, 215, 0, 0.1);
        border-color: rgba(255, 215, 0, 0.3);
    }

    .footer-legal-link i {
        margin-right: clamp(2px, 0.5vw, 4px);
        font-size: clamp(0.6rem, 1.4vw, 0.8rem);
    }

/* Footer Social - ปรับให้ responsive */
.footer-social {
    display: flex;
    gap: clamp(8px, 2vw, 12px);
    justify-content: center;
    align-items: center;
}

    .footer-social .social-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: clamp(32px, 6vw, 36px);
        height: clamp(32px, 6vw, 36px);
        border-radius: 50%;
        background: rgba(255,255,255,.05);
        color: #e0e0ff;
        transition: all .3s ease;
        font-size: clamp(0.8rem, 1.8vw, 1rem);
        text-decoration: none;
    }

        .footer-social .social-icon:hover {
            background: linear-gradient(45deg,#f5d100,#ff9248);
            color: #0a0a1a;
            transform: translateY(-3px);
        }

/* Mobile First Approach - จัดเรียงใหม่สำหรับมือถือ */
@media (max-width: 767.98px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 15px 0;
    }

    .footer-legal-container {
        flex-direction: column;
        gap: 8px;
        width: 100%;
        order: 2;
    }

    .copyright-text {
        order: 1;
        margin-bottom: 10px;
        font-size: 0.75rem;
        padding: 0 10px;
    }

    .footer-social {
        order: 3;
        justify-content: center;
        gap: 15px;
    }

    .footer-legal-link {
        font-size: 0.75rem;
        padding: 6px 10px;
        min-width: 120px;
        justify-content: center;
    }
}

/* Small tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
    }

    .footer-legal-container {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .footer-social {
        justify-content: center;
    }

    .copyright-text {
        text-align: center;
        margin-bottom: 10px;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .footer-legal-container {
        justify-content: flex-start;
        flex-wrap: wrap;
        width: auto;
    }

    .footer-social {
        justify-content: flex-end;
    }

    .copyright-text {
        text-align: left;
    }
}

/* Large screens */
@media (min-width: 1200px) {
    .footer-legal-container {
        gap: 20px;
    }

    .footer-legal-link {
        font-size: 0.9rem;
        padding: 8px 12px;
    }

    .copyright-text {
        font-size: 0.9rem;
    }
}

/* Ultra-wide screens */
@media (min-width: 1600px) {
    .footer-bottom {
        padding: 20px 0;
    }

    .footer-legal-container {
        gap: 25px;
    }
}

/* Very small screens (320px and below) */
@media (max-width: 320px) {
    .copyright-text {
        font-size: 0.7rem;
        line-height: 1.3;
    }

    .footer-legal-link {
        font-size: 0.7rem;
        padding: 5px 8px;
        min-width: 100px;
    }

        .footer-legal-link i {
            font-size: 0.6rem;
        }

    .footer-social .social-icon {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
}

/* Landscape phones */
@media (max-height: 500px) and (orientation: landscape) {
    .footer-bottom {
        padding: 10px 0;
    }

    .footer-legal-container {
        gap: 8px;
    }
}

/* Print styles */
@media print {
    .footer-social {
        display: none;
    }

    .footer-legal-container {
        flex-direction: column;
        gap: 5px;
    }

    .footer-legal-link {
        color: #000 !important;
        border: none;
        background: none;
    }

    .copyright-text {
        color: #000 !important;
        font-size: 0.8rem;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .footer-legal-link {
        border: 1px solid currentColor;
    }

        .footer-legal-link:hover {
            background-color: currentColor;
            color: #000;
        }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .footer-legal-link,
    .footer-social .social-icon {
        transition: none;
    }

        .footer-social .social-icon:hover {
            transform: none;
        }
}

/* Focus states for accessibility */
.footer-legal-link:focus,
.footer-social .social-icon:focus {
    outline: 2px solid #ffd700;
    outline-offset: 2px;
}

/* Ensure proper spacing on all containers */
.container {
    padding-left: clamp(15px, 3vw, 30px);
    padding-right: clamp(15px, 3vw, 30px);
}

/* Fix for very long text in copyright */
.copyright-text {
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
}