/* Location: /css/freepage_footer_style.css
   Compliance Part 3.6 (19-Oct-2026): styles for the SHARED footer (includes/global_footer.php) on pages that do
   NOT load homepage_style.css - free tools (apps/...) and studio/drive.php.
   Loaded automatically by global_footer.php when the page sets  $fflipp_footer_standalone = true;
   Section 1 is a straight copy of the "Site Footer" block of homepage_style.css (lines 1093-1354, 19-Oct-2026).
   If you change the footer look in homepage_style.css, copy the change here too.
   Section 2 protects the footer from the free pages' own generic rules (footer {...}, .container {...}, p {...}). */

/* ========== SECTION 1: copied from homepage_style.css ========== */
/* --- Site Footer Styles --- */
.site-footer {
    color: #fff;
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.85rem;
    margin-top: 3rem; 
    background-color: #368ec8;
}

.site-footer .footer-content {
    max-width: 1400px; /* Constrain width like .container */
    margin: 0 auto; /* Center the content */
    padding: 0 2rem; /* Add horizontal padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Increased gap for better spacing between sections */
}

.site-footer .footer-links {
    display: flex;
    flex-wrap: wrap; /* Allow links to wrap */
    justify-content: center;
    gap: 10px; /* Space between policy links */
}
.site-footer .footer-links a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
}
.site-footer .footer-links a:hover {
    color: #ff9c3f; 
}

/* NEW: Footer Social Links Container */
.footer-social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Space between social icons */
    margin-top: 10px; /* Space above social links */
    margin-bottom: 10px; /* Space below social links (before copyright) */
}

/* NEW: Individual Social Icon Link */
.social-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; /* Size of the icon area */
    height: 36px;
    border-radius: 50%; /* Circular background */
    background-color: rgba(255, 255, 255, 0.1); /* Subtle background for icons */
    transition: background-color 0.2s, transform 0.2s;
    color: #fff; /* Default icon color */
}

.social-icon-link:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Brighter background on hover */
    transform: scale(1.1); /* MODIFIED: Make the icon slightly larger on hover */
    color: #fff; /* Ensure SVGs stay white on hover */
}

/* --- UNIFIED ICON STYLING FOR FOOTER --- */

/* This targets BOTH the SVG and the IMG tags inside the links */
.social-icon {
    width: 24px;  /* Set the desired icon size */
    height: 24px;
}

/* Specific rule for SVGs */
.social-icon:not(.social-icon-img) { /* This targets the SVG but not the IMG */
    fill: currentColor;
}

/* Specific rule for IMGs */
.social-icon-img {
    object-fit: contain; /* Ensures the image scales without distortion */
}

/* --- NEW: Style for the separate LINE button row --- */
.footer-line-button {
    /* Center the button */
    text-align: center;
    /* Add some space above it, separating it from the other icons */
    margin-top: 1rem;
}

/* LINE Floating Button Styling */
.line-chat-btn {
    position: fixed;
    bottom: 120px; /* Sits above the YouTube button (assumed at ~20px) */
    right: 20px;
    width: 60px;
    height: 60px;
    z-index: 9999;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: block;
}

.line-chat-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}

.line-chat-btn:hover {
    transform: scale(1.15);
}

/* SMARTPHONE RESPONSIVENESS */
@media (max-width: 768px) {
    .line-chat-btn {
        width: 50px;  /* Slightly smaller for mobile */
        height: 50px;
        bottom: 111px; /* Adjusted height to keep spacing tight with YT button */
        right: 15px;  /* Closer to edge to save screen real estate */
    }
}

/* Optional: Subtle Pulse effect to draw attention */
@keyframes linePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.line-chat-btn {
    animation: linePulse 3s infinite ease-in-out;
}
.line-chat-btn:hover {
    animation: none; /* Stop pulsing when user is about to click */
}

/* ============================================= */
/* --- FFLIPP SUPPORT FLOATING BUTTON --- */
/* ============================================= */
.support-chat-btn {
    position: fixed;
    bottom: 50px;               /* sits below the LINE button */
    right: 20px;
    width: 60px;
    height: 60px;
    z-index: 9999;
    display: block;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Optional subtle pulse (same as LINE) */
    animation: linePulse 3s infinite ease-in-out;
    animation-delay: 1s;        /* offset so they don’t pulse together */
}

.support-chat-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
    border-radius: 50%;         /* makes it circular if the PNG isn’t already */
}

.support-chat-btn:hover {
    transform: scale(1.15);
    animation: none;            /* stop pulse on hover */
}

/* Mobile adjustments – keep the same stacking order */
@media (max-width: 768px) {
    .support-chat-btn {
        width: 50px;
        height: 50px;
        bottom: 30px;           /* slightly tighter on phones */
        right: 15px;
    }

    /* Optional: also nudge LINE a little higher if needed */
    .line-chat-btn {
        bottom: 90px;           /* keeps clear gap above the new support button */
    }
}

/* Snapchat Floating Button */
.snapchat-chat-btn {
    position: fixed;
    bottom: 189px; /* Positioned above LINE */
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #FFFC00; /* Official Snapchat Yellow */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: linePulse 3s infinite ease-in-out;
    animation-delay: 0.5s; /* Offsets pulse from LINE for a natural look */
}

.snapchat-chat-btn svg {
    width: 38px;
    height: 38px;
    fill: #000; /* Black ghost */
}

.snapchat-chat-btn:hover {
    transform: scale(1.15);
}

/* SMARTPHONE RESPONSIVENESS */
@media (max-width: 768px) {
    .snapchat-chat-btn {
        width: 50px;
        height: 50px;
        bottom: 150px; /* Adjusted for mobile stacking */
        right: 15px;
    }
    .snapchat-chat-btn svg {
        width: 30px;
        height: 30px;
    }
    
    /* Ensure LINE stays in the middle on mobile */
    .line-chat-btn {
        bottom: 85px; 
    }
}

/* Responsive adjustment for footer */
@media (max-width: 768px) {
    .site-footer {
        padding: 1rem 0;
    }
    .site-footer .footer-content {
        padding: 0 1rem; /* Adjust horizontal padding on mobile */
    }
    .site-footer .footer-links {
        flex-direction: column; /* Stack policy links vertically on small screens */
        gap: 5px;
    }
    .site-footer .footer-links a {
        margin: 0;
    }
    .footer-social-links {
        gap: 15px; /* Reduce gap between social icons on mobile */
    }
    .social-icon-link {
        width: 32px; /* Smaller icons on mobile */
        height: 32px;
    }
    .social-icon {
        width: 20px; /* Smaller SVG icons on mobile */
        height: 20px;
    }
    .social-icon-img {
        object-fit: contain; /* Re-assert for safety */
    }
}

/* ========== SECTION 2: protection against page-level styles on the free pages ========== */
/* The free pages style every <footer> (blue box, 2em padding, underlined links) - reset to the shared look. */
footer.site-footer {
    padding: 1.5rem 0;
    margin-top: 3rem;
    font-size: 0.85rem;
    color: #fff;
    background-color: #368ec8;
    text-align: center;
    box-sizing: border-box;
}
/* The free pages' ".container" is a white card (max 900px, padding, shadow). The footer reuses that class name. */
.site-footer .footer-content.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    background: none;
    border-radius: 0;
    box-shadow: none;
}
.site-footer p { color: #fff; margin: 0; }
.site-footer a { text-decoration: none; }
.site-footer img { max-width: 100%; }
/* 10 social icons are wider than a 360px phone: let them wrap onto a second row (same fix as homepage_style.css). */
.footer-social-links { flex-wrap: wrap; }
@media (max-width: 768px) {
    footer.site-footer { padding: 1rem 0; }
    .site-footer .footer-content.container { padding: 0 1rem; margin: 0 auto; }
}