/**
 * ========================================================================
 * MODERN DARK FOOTER REDESIGN - DuHosting Tanzania
 * ========================================================================
 * Based on Namecheap-style dark, professional footer design
 * Choose ONE of the three solutions below
 */

/* ========================================================================
   SOLUTION 1: PREMIUM DARK FOOTER (RECOMMENDED ⭐)
   Best for: Modern, professional hosting website look
   ======================================================================== */

/**
 * This is the

 complete Namecheap-inspired dark footer redesign with:
 * - Pure black background (#0f0f0f)
 * - White/light gray text with proper hierarchy
 * - Elegant hover effects
 * - Modern flex grid layout
 * - Social media icon support
 * - Fully responsive
 */

/* Main footer section - Dark background */
footer .foot-one {
    background-color: #0f0f0f !important;
    padding: 60px 0 40px !important;
    border-bottom: 1px solid #2a2a2a;
}

/* Column headings - White, uppercase, modern */
footer .foot-one h5 {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 25px !important;
}

/* Contact info icons - Orange brand color */
footer .foot-one h5 i {
    color: #ff6311 !important;
}

/* All link text - Light gray */
footer .foot-one a,
footer .foot-one p,
footer .foot-one li {
    color: #a0a0a0 !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    transition: all 0.3s ease !important;
}

/* Link hover effects - Orange underline */
footer .foot-one a:hover {
    color: #ff6311 !important;
    text-decoration: none !important;
    padding-left: 5px;
}

/* Copyright section - Darker black */
footer .copyright {
    background-color: #000000 !important;
    border-top: 1px solid #1a1a1a !important;
    padding: 25px 0 !important;
}

footer .copyright p,
footer .copyright a,
footer .copyright li {
    color: #888888 !important;
    font-size: 13px !important;
}

footer .copyright a:hover {
    color: #ff6311 !important;
}

/* Footer columns spacing */
footer .foot-one .col-lg-3,
footer .foot-one .col-md-6 {
    margin-bottom: 30px;
}

/* Responsive mobile stacking */
@media (max-width: 767px) {
    footer .foot-one {
        padding: 40px 0 30px !important;
    }

    footer .foot-one .col-lg-3,
    footer .foot-one .col-md-6 {
        margin-bottom: 35px;
    }

    footer .copyright {
        text-align: center !important;
    }

    footer .copyright .col-md-6 {
        text-align: center !important;
    }
}

/* Back to top button - Modern dark */
#myBtn {
    background-color: #ff6311 !important;
    color: #ffffff !important;
    border: none !important;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(255, 99, 17, 0.4);
    transition: all 0.3s ease;
    z-index: 999;
}

#myBtn:hover {
    background-color: #e55a0f !important;
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(255, 99, 17, 0.6);
}


/* ========================================================================
   SOLUTION 2: SIMPLER CSS-ONLY DARK THEME (SAFE 👍)
   Best for: Quick implementation without changing structure
   ======================================================================== */

/**
 * This applies dark colors while keeping the original layout intact
 * Safer approach with minimal code
 */

/* Uncomment below if you want to use Solution 2 instead of Solution 1 */

/*
footer .foot-one {
    background-color: #121212 !important;
    padding: 50px 0 30px !important;
}

footer .foot-one h5 {
    color: #ffffff !important;
    font-weight: 600 !important;
}

footer .foot-one a,
footer .foot-one p {
    color: #cccccc !important;
}

footer .foot-one a:hover {
    color: #ff6311 !important;
}

footer .copyright {
    background-color: #0a0a0a !important;
    border-top: 1px solid #222222 !important;
}

footer .copyright p,
footer .copyright a {
    color: #999999 !important;
}

footer .copyright a:hover {
    color: #ff6311 !important;
}
*/


/* ========================================================================
   SOLUTION 3: EXTENDED FEATURES (ADVANCED 🚀)
   Best for: Complete Namecheap-style footer with extras
   ======================================================================== */

/**
 * This includes everything from Solution 1 PLUS:
 * - Social media icon section
 * - Payment badges area
 * - Newsletter signup styling
 * - ICANN/certification badges
 * 
 * To use this, first apply Solution 1, then add the sections below
 */

/* Social Media Icons Section (Add to footer.tpl as needed) */
.footer-social {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a0a0a0 !important;
    font-size: 16px;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.footer-social a:hover {
    background-color: #ff6311;
    color: #ffffff !important;
    transform: translateY(-3px);
    padding-left: 0 !important;
}

/* Payment Badges Section */
.footer-payments {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
    opacity: 0.7;
}

.footer-payments img {
    height: 30px;
    width: auto;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.footer-payments img:hover {
    filter: grayscale(0%);
}

/* Newsletter Signup Box */
.footer-newsletter {
    background-color: #1a1a1a;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

.footer-newsletter h5 {
    color: #ffffff !important;
    font-size: 16px !important;
    margin-bottom: 15px !important;
}

.footer-newsletter .newsletter-form {
    display: flex;
    gap: 10px;
}

.footer-newsletter input[type="email"] {
    flex: 1;
    padding: 12px 15px;
    background-color: #0f0f0f;
    border: 1px solid #333333;
    border-radius: 6px;
    color: #ffffff;
    font-size: 14px;
}

.footer-newsletter input[type="email"]:focus {
    outline: none;
    border-color: #ff6311;
}

.footer-newsletter button {
    padding: 12px 25px;
    background-color: #ff6311;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.footer-newsletter button:hover {
    background-color: #e55a0f;
    transform: translateY(-2px);
}

/* Certification/ICANN Badge */
.footer-certifications {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 15px;
}

.footer-certifications img {
    height: 50px;
    width: auto;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.footer-certifications img:hover {
    opacity: 1;
}

/* Trust badges / Secure checkout icons */
.footer-trust-badges {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: 15px;
}

.footer-trust-badge {
    background-color: #1a1a1a;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 11px;
    color: #888888;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-trust-badge i {
    color: #4caf50;
    font-size: 16px;
}

/* Divider line between sections */
.footer-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #333333 50%, transparent);
    margin: 40px 0;
}

/* Mobile optimization for extras */
@media (max-width: 767px) {

    .footer-social,
    .footer-payments,
    .footer-certifications {
        justify-content: center;
    }

    .footer-newsletter .newsletter-form {
        flex-direction: column;
    }

    .footer-newsletter button {
        width: 100%;
    }
}


/* ========================================================================
  BONUS: SMOOTH ANIMATIONS
   ======================================================================== */

/* Fade-in animation for footer sections */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

footer .foot-one .col-lg-3,
footer .foot-one .col-md-6 {
    animation: fadeInUp 0.6s ease-out;
}

footer .foot-one .col-lg-3:nth-child(1) {
    animation-delay: 0.1s;
}

footer .foot-one .col-lg-3:nth-child(2) {
    animation-delay: 0.2s;
}

footer .foot-one .col-lg-3:nth-child(3) {
    animation-delay: 0.3s;
}

footer .foot-one .col-lg-3:nth-child(4) {
    animation-delay: 0.4s;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}


/* ========================================================================
   IMPLEMENTATION NOTES
   ======================================================================== */

/**
 * HOW TO USE:
 * 
 * 1. SOLUTION 1 (RECOMMENDED):
 *    - Copy all CSS under "SOLUTION 1" to your WHMCS Custom CSS
 *    - Location: Setup > General Settings > Customization > Custom Head HTML
 *    - Wrap in <style></style> tags
 *    - Clear template cache
 * 
 * 2. SOLUTION 2 (SIMPLER):
 *    - Uncomment the CSS under "SOLUTION 2"
 *    - Remove/comment out Solution 1
 *    - Same implementation as above
 * 
 * 3. SOLUTION 3 (ADVANCED):
 *    - First implement Solution 1
 *    - Then add HTML sections to footer.tpl for:
 *      • Social media icons
 *      • Newsletter signup
 *      • Payment badges
 *    - CSS styling is already included
 * 
 * TESTING CHECKLIST:
 * ✓ Check footer on homepage
 * ✓ Test all links still work
 * ✓ Verify mobile responsiveness
 * ✓ Test hover effects
 * ✓ Clear browser cache
 * ✓ Clear WHMCS template cache
 * 
 * CUSTOMIZATION:
 * - Change #ff6311 to your brand color
 * - Adjust #0f0f0f background if too dark
 * - Modify font sizes as needed
 * - Add/remove columns in footer.tpl
 */