/* Zino footer v2
   Layout & spacing live in Bootstrap utility classes in _FooterV2.cshtml.
   This file keeps ONLY what Bootstrap has no language for:
   hover/state effects, the ::before dash markers, the decorative
   illustrations, the clip-path brand pill, exact image/icon px sizes,
   and brand colours/fonts. */

/* ── root: colour + font (external) + a top gap larger than any BS spacer ── */
/* margin-top is now Bootstrap (mt-0 mt-md-5 in markup: 0 on mobile, 48px ≥md) */
.footer-v2 {
    color: var(--zino-text);
    font-size: clamp(0.6rem, 0.32vw + 0.525rem, 0.8125rem); /* 9.6 → 13px, fluid */
}

/* fixed bottom nav (shown below lg) needs reserved height */
@media (max-width: 991.98px) {
    .footer-v2 {
        padding-bottom: 70px;
    }
}

/* side insets are now Bootstrap (px-4 px-md-3 on the container in markup) */

/* ── desktop illustration: background of the left box (contain + corner) so it
   never overflows and scales with the box. Mobile crop stays an img-fluid img. ── */
/* Illustration by width:
   • <992     → mobile crop img at the top of the footer (capped at native size)
   • 992–1459 → full illustration as an in-flow rectangle above about/eNAMAD
   • ≥1460    → the bleeding ::before layer (kept as-is, looks good) */
.fv2-illustration-box {
    display: none;
}

/* nudge the top illustrations (phone / tablet) down a touch */
.fv2-illustration-top {
    position: relative;
    top: 30px;
}

@media (min-width: 992px) and (max-width: 1459.98px) {
    .fv2-illustration-box {
        display: block;
    }
}

@media (min-width: 1460px) {
    .fv2-illustration {
        position: relative;
    }

        .fv2-illustration > * {
            position: relative;
            z-index: 1;
        }
        /* content above the art */
        .fv2-illustration::before {
            content: "";
            position: absolute;
            z-index: 0;
            pointer-events: none;
            left: 17px;
            bottom: 15px;
            width: calc(100% + 20px);
            aspect-ratio: 903 / 366;
            background: url(../image/ui/illustration-footer.png) no-repeat left bottom / contain;
        }
}

/* ── image / icon sizes (px values Bootstrap has no utility for) ── */
.fv2-logo {
    height: 55px;
    width: auto;
}

.fv2-icon,
.fv2-social-icon {
    font-size: 1rem;
}

.fv2-social-logo {
    height: 17px;
    width: auto;
}

.fv2-brand-card-logo {
    height: 20px;
    width: auto;
    min-width: 0; /* allow shrinking so the row stays on one line (pill never wraps) */
}

.fv2-namad {
    width: 100px;
    height: auto;
}

@media (max-width: 767.98px) {
    .fv2-logo {
        width: 134.744px;
        height: 24.666px;
    }

    .fv2-icon,
    .fv2-contact-mobile .fv2-icon {
        font-size: 1.0625rem;
    }

    .fv2-social-icon {
        font-size: 0.590625rem;
        color: var(--zino-text);
    }

    .fv2-social-logo {
        height: 9.45px;
    }

    .fv2-brand-card-logo {
        width: 70.587px;
        height: 16.954px;
        object-fit: contain;
    }

    .fv2-namad {
        width: 54.255px;
        height: 59.029px;
    }
}

/* ── fonts / colours (external tokens) ── */
.fv2-section-title {
    font-size: 0.875rem;
    color: var(--zino-text);
}

.fv2-links li a {
    display: block;
    color: var(--zino-text);
    font-size: clamp(0.6rem, 0.32vw + 0.525rem, 0.8125rem);
    line-height: 31px;
    transition: color 0.15s;
}

.fv2-phone-item a {
    color: var(--zino-text);
    font-size: clamp(0.6rem, 0.32vw + 0.525rem, 0.8125rem);
    direction: ltr;
    text-decoration: none;
    transition: color 0.15s;
}

.fv2-social-item {
    color: var(--zino-text);
    font-size: clamp(0.5625rem, 0.28vw + 0.4965rem, 0.75rem);
    transition: color 0.15s;
}

.fv2-about-text {
    color: var(--zino-text);
    font-size: clamp(0.6rem, 0.32vw + 0.525rem, 0.8125rem);
    line-height: 20px;
    max-width: 440px;
    max-height: 60px;
}

.fv2-copyright,
.fv2-brand-text {
    color: var(--zino-text);
    font-size: clamp(0.5625rem, 0.28vw + 0.4965rem, 0.75rem);
}

.fv2-brand-name {
    color: var(--zino-green);
    font-weight: 700;
}

.fv2-brand-sep {
    color: #ccc;
}

.fv2-divider {
    border-color: var(--zino-border);
    opacity: 1;
}

/* brand row gap 32px — not on Bootstrap's spacer scale (it skips 32) */
.fv2-brands-row {
    gap: var(--space-5);
    margin-top: var(--space-3);
}
/* 24px, grouped */

/* ── dash marker before each link (pseudo-element: no Bootstrap equivalent) ── */
.fv2-links li a::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 4px;
    background: var(--zino-text-muted);
    vertical-align: middle;
    margin-left: 8px;
    transition: background-color 0.15s;
}

/* ── hover / state effects (Bootstrap has no hover-variant utilities) ── */
.fv2-links li a:hover,
.fv2-phone-item:hover,
.fv2-phone-item a:hover,
.fv2-icon:hover,
.fv2-social-item:hover {
    color: var(--zino-green) !important;
    font-weight: 700;
}

    .fv2-links li a:hover::before {
        background: var(--zino-green);
        width: 16px;
    }

/* ── slanted brand pill (clip-path shape: no Bootstrap equivalent) ── */
/* Self-contained component (reused in footer, about-zino__more and
   testimonials__all). Positioning + centering live here so every consumer
   works without repeating utilities; the footer markup also carries matching
   utilities harmlessly. flex-shrink-0 stays a utility where the parent flexes. */
.fv2-brand-nav {
    isolation: isolate;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 20px;
    color: #fff !important;
}

    .fv2-brand-nav::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--zino-green);
        clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
        transition: background 0.2s ease;
    }

    .fv2-brand-nav:hover::before {
        background: var(--zino-green-hover);
    }

.fv2-brand-nav-icon {
    font-size: 0.7rem;
    color: #fff;
}

/* ── mobile specifics that Bootstrap can't express ── */
@media (max-width: 767.98px) {
    /* tighter link line-height + smaller dash */
    .fv2-links li a {
        line-height: 22.923px;
    }

        .fv2-links li a::before {
            width: 8px;
            height: 3px;
            margin-left: 5px;
        }

    .fv2-contact-mobile .fv2-section-title {
        line-height: 34px;
    }

    .fv2-contact-mobile .fv2-phone-item a {
        font-size: 0.75rem;
        line-height: 34px;
    }

    /* (the strip title + phones are hidden below lg by d-none/d-lg-* in markup) */

    /* grey pill: only the colour + box size stay; nowrap / even spacing are
       responsive utilities in the markup (flex-nowrap, justify-content-evenly) */
    /* full-width pill so its edges line up with the about/brands column */
    .fv2-right-strip .fv2-socials-row {
        height: 31px;
        background: #f2f2f2;
        padding: 0 8px;
    }

    .fv2-social-item {
        line-height: 25.762px;
    }

    /* left strip reflow: about + eNAMAD on row 1, brands full-width on row 2.
       wrap/align are responsive utilities in the markup; only the asymmetric gap
       and the display:contents + order regroup (no Bootstrap utility) stay here */
    .fv2-left-col {
        gap: 12px 14px;
    }

    .fv2-left-strip {
        display: contents;
    }

    .fv2-about-text {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        width: 260px;
        max-width: 100%;
        line-height: 16.609px;
        max-height: 52px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .fv2-namad-link {
        order: 2;
    }

    .fv2-brands-row {
        order: 3;
        flex: 0 0 100%;
        justify-content: space-between;
        gap: 16px;
        margin-top: 0;
    }

        .fv2-brands-row .fv2-brand-nav {
            width: 26.577px;
            height: 17.394px;
        }

    .fv2-divider {
        width: min(364px, 100%);
        margin: 0 auto;
        border-color: #ddd;
    }
}

/* ── Mobile bottom nav (separate fixed bar; icon + label per item) ── */
.mobile-footer {
    border-bottom-color: var(--zino-green, #00ae5e);
}

    /* keep the bar's items spread evenly across the full width (no left-cluster,
       no right gap) regardless of the legacy float-button layout */
    .mobile-footer .parent {
        width: 100%;
        justify-content: space-around;
    }

        .mobile-footer .parent .item {
            flex: 1 1 0;
            text-align: center;
        }

    .mobile-footer .parent .item a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: var(--zino-text);
        text-decoration: none;
    }

    .mobile-footer .parent .item i {
        color: var(--zino-text);
        line-height: 1;
    }

    .mobile-footer .item-label {
        font-size: 0.625rem;
        line-height: 1;
        color: var(--zino-text);
    }