/* Footer Styles */
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content {
    flex: 1;
}

.site-footer {
    background: linear-gradient(-45deg, #0a0a0a, #1a1a2e, #16213e, #0f0f0f);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    color: #b0b0b0;
    padding: 60px 0 0;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    margin-top: auto;
    border-top: 1px solid rgba(65, 105, 225, 0.3);
    position: relative;
    overflow: hidden;
}

/* Subtle gradient animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ─ Animated grid overlay ─ 
   تحكم بالقيم:
   opacity: 0.22     → شفافية الشبكة الكلية (0 = مخفية، 1 = كاملة)
   0.50              → قوة لون خطوط الشبكة (0 = شفاف، 1 = صلب)
   background-size   → حجم المربعات (48px = متوسط، أصغر = مربعات أكثر)
   mask-image         → منطقة الظهور (الأرقام الأولى = عرض وارتفاع، at 50% 50% = المركز)
*/
.footer-grid-overlay {
    position: absolute;
    inset: -2px;
    pointer-events: none;
    opacity: 0.22;                /* ← شفافية الشبكة الكلية */
    background-image:
        linear-gradient(rgba(var(--primary-color-rgb, 65,105,225), 0.50) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--primary-color-rgb, 65,105,225), 0.50) 1px, transparent 1px);
    background-size: 48px 48px;   /* ← حجم المربعات */
    mask-image: radial-gradient(ellipse 120% 100% at 50% 50%, rgba(0, 0, 0, 1), transparent);
    -webkit-mask-image: radial-gradient(ellipse 120% 100% at 50% 50%, rgba(0, 0, 0, 1), transparent);
    animation: footerGridShift 16s ease-in-out infinite alternate;
    z-index: 0;
}

@keyframes footerGridShift {
    0% {
        background-position: 0 0;
        opacity: 0.22;
    }

    50% {
        background-position: 12px 12px;
        opacity: 0.28;
    }

    100% {
        background-position: 0 24px;
        opacity: 0.22;
    }
}

/* ─ Floating dots canvas ─ */
.footer-dots-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ─ Gradient glow orb ─ */
.footer-glow {
    position: absolute;
    width: 600px;
    height: 400px;
    right: -100px;
    top: -60px;
    background: radial-gradient(circle, rgba(var(--primary-color-rgb, 65,105,225), 0.10), transparent 65%);
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
    animation: footerGlow 8s ease-in-out infinite alternate;
}

@keyframes footerGlow {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-30px, 20px) scale(1.15);
        opacity: 1;
    }
}

/* Remove old ::before, replaced by grid overlay */
.site-footer::before {
    display: none;
}

.footer-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px;
    gap: 40px;
}

/* Columns */
.footer-col {
    flex: 1;
    min-width: 250px;
}

/* Column 1: Logo & About */
.footer-col-1 {
    flex: 1.5;
}

.custom-footer-logo {
    max-width: 180px;
    height: auto;
    margin-bottom: 25px;
    display: block;
}

.footer-about-text p {
    line-height: 1.6;
    color: #888;
    max-width: 90%;
    margin-bottom: 0;
}

/* Column 2: Quick Links */
.footer-col-2 {
    flex: 0.8;
}

.footer-title {
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 10px;
}

.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 3px;
    background-color: var(--primary-color, #4169e1);
    /* Use dynamic variable */
    border-radius: 2px;
}

/* Quick Links Styling */
.footer-col-2 div,
.footer-col-2 nav,
.footer-col-2 ul,
.footer-links ul,
.menu-footer-menu-container ul {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.footer-col-2 li,
.footer-links li,
.menu-footer-menu-container li {
    list-style-type: none !important;
    margin-bottom: 12px;
    padding: 0 !important;
    margin-left: 0 !important;
    display: block !important;
    background: none !important;
}

/* Remove bullets specifically targetting nested elements that might add them */
.footer-col-2 li::before,
.footer-links li::before {
    content: none !important;
    display: none !important;
}

.footer-col-2 a,
.footer-links a,
.menu-footer-menu-container a {
    color: #b0b0b0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.3s ease;
    display: inline-block;
    font-size: 15px;
    padding-left: 0;
}

.footer-col-2 a:hover,
.footer-links a:hover,
.menu-footer-menu-container a:hover {
    color: var(--primary-color, #4169e1) !important;
    transform: translateX(8px);
}

/* Add FontAwesome Fix globally for footer */
.site-footer .fa-brands,
.site-footer .fab,
.social-link i {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal;
}

.site-footer .fa,
.site-footer .fas {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
}

.social-link i::before {
    display: inline-block;
}

/* Column Extra: Footer 3 (Dynamic Menu) */
.footer-col-extra {
    flex: 0.8;
}

.footer-col-extra div,
.footer-col-extra nav,
.footer-col-extra ul {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.footer-col-extra li {
    list-style-type: none !important;
    margin-bottom: 12px;
    padding: 0 !important;
    margin-left: 0 !important;
    display: block !important;
    background: none !important;
}

.footer-col-extra li::before {
    content: none !important;
    display: none !important;
}

.footer-col-extra a {
    color: #b0b0b0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.3s ease;
    display: inline-block;
    font-size: 15px;
    padding-left: 0;
}

.footer-col-extra a:hover {
    color: var(--primary-color, #4169e1) !important;
    transform: translateX(8px);
}

/* Column 3: Contact Info & Socials */
.footer-col-3 {
    flex: 1.2;
}

.contact-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.contact-label {
    min-width: 70px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.contact-value,
.contact-value a {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.3s;
    line-height: 1.6;
}

.contact-value a:hover {
    color: var(--primary-color, #4169e1);
}

/* Social Links */
.social-links {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.social-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background-color: #222;
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy effect */
    font-size: 18px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.social-link:hover {
    background-color: var(--primary-color, #4169e1);
    /* Dynamic background hover */
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(65, 105, 225, 0.4);
    /* Glow effect, adjusted roughly to blue but acceptable */
}

/* Footer Bottom */
.footer-bottom {
    background-color: #0d0d0d;
    padding: 25px 20px;
    border-top: 1px solid #222;
    font-size: 13px;
    color: #666;
}

.site-info-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.site-info-left {
    text-align: left;
}

/* Two blocks share this row: the copyright on the left and the bottom menu on
   the right. The menu takes the remaining width and sits at its far end, so the
   bar stays balanced edge to edge. */
.site-info-center {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

/* Footer Bottom Menu */
.footer-bottom-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-bottom-links li a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-bottom-links li a:hover {
    color: var(--primary-color, #4169e1);
}

/* Guarantor Company Logo */
.guarantor-section {
    margin-top: 25px;
}

.guarantor-section a {
    display: inline-block;
    text-decoration: none;
}

.guarantor-logo {
    width: 200px;
    height: auto;
    transition: opacity 0.3s ease;
}

.guarantor-logo:hover {
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 900px) {
    .footer-container {
        flex-direction: column;
        padding-bottom: 40px;
        gap: 30px;
    }

    .footer-col {
        min-width: 100%;
        margin-bottom: 10px;
    }

    .footer-title {
        margin-bottom: 20px;
    }

    .site-info-container {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .site-info-left {
        text-align: center;
        width: 100%;
    }

    /* Stacked here, menu above the copyright — so the desktop flex-end has to
       go back to centre. */
    .site-info-center {
        width: 100%;
        order: -1;
        justify-content: center;
        margin-bottom: 10px;
    }

    .contact-row {
        flex-direction: row;
        /* Keep row even on mobile unless text is huge */
    }
}

@media (max-width: 480px) {
    .contact-label {
        min-width: 60px;
    }
}