/* Assumes --giahban-* custom properties already declared globally by header CSS */

.giahban-footer {
    background: var(--giahban-bg);
    border-top: 1px solid var(--giahban-border);
    padding: 40px 20px 24px;
    direction: rtl;
}

.giahban-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1.4fr 1fr 1fr 1fr;
    column-gap: 32px; /* widened from 24px so column 2 text doesn't crowd column 3 */
    row-gap: 24px;
    align-items: start;
}

/* Column 1: Logo — plain image, not a link */
.giahban-footer__logo {
    width: 110px; /* brought back down — 150px was too large */
    height: auto;
    display: block;
}

/* Column 2: Brand text (name + description + address) */
.giahban-footer__col--text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.giahban-footer__brand-name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--giahban-text);
}

.giahban-footer__desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--giahban-text-muted);
    max-width: 300px;
    text-wrap: balance; /* asks the browser to even out line lengths instead of one long/short line */
}

.giahban-footer__address {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--giahban-text-muted);
    margin-top: 4px;
}
.giahban-footer__address svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Columns 3 & 4: link lists — nudged left, extra breathing room from column 2 */
.giahban-footer__col--links {
    margin-left: 40px;
}
.giahban-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.giahban-footer__list a {
    color: var(--giahban-text);
    text-decoration: none;
    font-size: 14px;
    transition: color var(--giahban-transition);
}
/* !important: Astra's own link-hover styles otherwise win the specificity fight */
.giahban-footer__list a:hover {
    color: var(--giahban-primary) !important;
}

/* Column 5: Enamad + social */
.giahban-footer__col--badges {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

/* Enlarged slightly so it visually matches the width of the 3 social icons below it */
.giahban-footer__enamad img {
    max-width: 90px;
    height: auto;
}

.giahban-footer__social {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* All three icons get identical box treatment — consistent centering across telegram/whatsapp/instagram */
.giahban-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--giahban-text-muted);
    transition: color var(--giahban-transition);
}

/* Optical size correction: Telegram's perfect circle reads slightly larger
   than WhatsApp's notched bubble at the same box size — scale it down a touch */
.giahban-footer__social-link--telegram svg {
    transform: scale(0.92);
    transform-origin: center;
}

/* Telegram / WhatsApp: simple solid brand-color hover */
.giahban-footer__social-link--telegram:hover {
    color: #229ED9 !important; /* Telegram brand blue */
}
.giahban-footer__social-link--whatsapp:hover {
    color: #25D366 !important; /* WhatsApp brand green */
}

/* Instagram: two icons stacked in the same spot, cross-fade on hover for a real gradient effect */
.giahban-footer__social-link--instagram {
    position: relative;
}
.giahban-footer__ig-icon {
    position: absolute;
    top: 0;
    left: 0;
}
.giahban-footer__ig-icon--default {
    opacity: 1;
    transition: opacity var(--giahban-transition);
}
.giahban-footer__ig-icon--gradient {
    opacity: 0;
    transition: opacity var(--giahban-transition);
}
.giahban-footer__social-link--instagram:hover .giahban-footer__ig-icon--default {
    opacity: 0;
}
.giahban-footer__social-link--instagram:hover .giahban-footer__ig-icon--gradient {
    opacity: 1;
}

/* Mobile: collapse grid entirely, stack logo/text/badges centered, hide link columns */
@media (max-width: 768px) {
    .giahban-footer__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    .giahban-footer__col--links {
        display: none;
    }
    .giahban-footer__col--text {
        align-items: center;
    }
    .giahban-footer__desc {
        max-width: 320px;
    }
    .giahban-footer__address {
        justify-content: center;
    }
    .giahban-footer__col--badges {
        align-items: center;
    }
    .giahban-footer__social {
        justify-content: center;
    }
}