/* ==========================================================================
   Site chrome: the partner-logo strip above the footer
   (global/materials/clients.blade.php), the footer, the search panel and the
   phone tab bar (layouts/global/footer.blade.php).
   Flat surfaces, one brand green, hairlines; no gradients or bevels.
   The nav bar itself lives in mrn/site-nav.css.
   ========================================================================== */
:root {
    --sc-green: #119c4d;
    --sc-green-ink: #0f7a3e;
    --sc-green-soft: #e8f5ee;
    --sc-deep: #0b2e1e;
    --sc-ink: #1d2b23;
    --sc-muted: #5f6f66;
    --sc-line: #e3ebe6;
    --sc-surface: #f4f7f5;
    --sc-radius: 12px;
    --sc-ease: cubic-bezier(.2, .7, .2, 1);
}

.sfoot svg, .mtab svg, .ssearch svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
    flex: 0 0 auto;
}

/* ---------- partner logos above the footer: a slim green strip ----------
   The home page content is blade stored in the DB; forced in case a page still
   carries the old inline background and wave. */
section.clients {
    margin: 0 !important;
    padding: 14px 0 !important;
    background: var(--sc-green) !important;
    background-image: none !important;
}
section.clients .mrn-waves-overlay-back { display: none !important; }
section.clients .owl-dots, section.clients .owl-nav, section.clients .owl-controls { display: none !important; }
section.clients .container .row { top: 0 !important; }
section.clients .clients-logo .item a { display: block; padding: 4px 8px; }
section.clients .clients-logo .item img {
    display: block;
    width: auto !important;
    max-width: 100%;
    max-height: 64px;
    margin: 0 auto;
    opacity: .9;
    transition: opacity .2s, transform .25s var(--sc-ease);
}
section.clients .clients-logo .item a:hover img { opacity: 1; transform: scale(1.06); }
.mrn-waves-overlay-back, .mrn-waves-overlay-top { display: none !important; }
@media (max-width: 576px) {
    section.clients .clients-logo .item img { max-height: 52px; }
}

/* ---------- footer ---------- */
.sfoot {
    position: relative;
    overflow: hidden;
    background: var(--sc-deep) !important;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    line-height: 1.9;
}
/* the dotted world map of the old footer, barely there */
.sfoot:before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: url(/public/assets/global/images/footer-bg.png) center 40px / 1400px auto no-repeat;
    opacity: .14;
    pointer-events: none;
}
.sfoot > * { position: relative; }
.sfoot a { color: rgba(255, 255, 255, .82); text-decoration: none; transition: color .2s; }
.sfoot a:hover, .sfoot a:focus { color: #fff; text-decoration: none; }

.sfoot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    padding: 56px 0 40px;
}
.sfoot-brand img {
    display: block;
    height: 60px; width: auto; max-width: 100%;
    margin-bottom: 18px;
    filter: brightness(0) invert(1);
}
.sfoot-address { margin: 0 0 14px; }
.sfoot-contact, .sfoot-links, .sfoot-bottom-links { list-style: none; margin: 0; padding: 0; }
.sfoot-contact li { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.sfoot-contact svg { width: 16px; height: 16px; color: #6fd39b; }
.sfoot-contact a { color: rgba(255, 255, 255, .7); }

.sfoot-title { margin: 0 0 14px; color: #fff; font-size: 15px; font-weight: 700; }
.sfoot-title ~ .sfoot-title { margin-top: 28px; }
.sfoot-links li { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sfoot-links li:last-child { border-bottom: 0; }
.sfoot-links a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255, 255, 255, .72);
}

.sfoot-social { display: flex; flex-wrap: wrap; gap: 12px; }
.sfoot-social a {
    display: inline-flex;
    width: 44px; height: 44px;
    overflow: hidden;
    border-radius: 12px;
    transition: transform .25s var(--sc-ease);
}
.sfoot-social a:hover { transform: translateY(-3px); }
.sfoot-social img { display: block; width: 100%; height: 100%; }

.sfoot-trust { display: flex; flex-wrap: wrap; gap: 10px; }
.sfoot-trust img {
    width: 72px; height: 72px;
    padding: 8px;
    object-fit: contain;
    border-radius: var(--sc-radius);
    background: #fff;
    cursor: pointer;
    transition: transform .25s var(--sc-ease);
}
.sfoot-trust img:hover { transform: translateY(-3px); }

.sfoot-bottom { border-top: 1px solid rgba(255, 255, 255, .08); }
.sfoot-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 13px;
}
.sfoot-bottom-inner:before, .sfoot-bottom-inner:after { display: none; }
.sfoot-copy { margin: 0; color: rgba(255, 255, 255, .55); }
.sfoot-bottom-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.sfoot .sfoot-bottom-links a { color: rgba(255, 255, 255, .6); }
.sfoot .sfoot-bottom-links a:hover { color: #fff; }

@media (max-width: 991px) {
    .sfoot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
    .sfoot-about { grid-column: 1 / -1; }
}
@media (max-width: 576px) {
    .sfoot-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 36px 0 28px; }
    .sfoot-bottom-inner { justify-content: center; text-align: center; }
    .sfoot-bottom-links { justify-content: center; }
}

/* ---------- search panel ---------- */
.ssearch .ssearch-dialog { width: auto; max-width: 640px; margin: 10vh auto 0; padding: 0 16px; }
.ssearch .ssearch-box {
    overflow: hidden;
    border: 0;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(8, 24, 15, .35);
}
.ssearch-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px 12px 16px;
    border-bottom: 1px solid var(--sc-line);
}
.ssearch-icon { width: 22px !important; height: 22px !important; color: var(--sc-green); }
.ssearch .ssearch-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--sc-ink);
    font-size: 18px;
}
.ssearch-input::-webkit-search-cancel-button { display: none; }
.ssearch-input::placeholder { color: #9aa79f; }
.ssearch-submit {
    height: 40px; padding: 0 18px;
    border: 0; border-radius: 999px;
    background: var(--sc-green);
    color: #fff;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
}
.ssearch-submit:hover { background: var(--sc-green-ink); }
.ssearch-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--sc-muted);
    cursor: pointer;
}
.ssearch-close:hover { background: var(--sc-surface); color: var(--sc-ink); }
.ssearch-body { padding: 16px 20px 12px; }
.ssearch-label { margin: 2px 0 10px; color: var(--sc-muted); font-size: 12px; font-weight: 700; }
.ssearch-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ssearch-chips a {
    padding: 6px 14px;
    border: 1px solid var(--sc-line);
    border-radius: 999px;
    background: var(--sc-surface);
    color: var(--sc-ink);
    font-size: 13px;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s;
}
.ssearch-chips a:hover { border-color: var(--sc-green); background: var(--sc-green-soft); color: var(--sc-green-ink); }
.ssearch-recent { list-style: none; margin: 0 -10px; padding: 0; }
.ssearch-recent a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px;
    border-radius: 12px;
    color: var(--sc-ink);
    text-decoration: none;
}
.ssearch-recent a:hover { background: var(--sc-surface); color: var(--sc-green-ink); }
.ssearch-recent svg { color: #9aa79f; }
.ssearch-recent span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssearch-foot {
    display: flex; gap: 18px;
    padding: 10px 20px;
    border-top: 1px solid var(--sc-line);
    background: var(--sc-surface);
    color: var(--sc-muted);
    font-size: 12px;
}
.ssearch-foot kbd {
    padding: 1px 6px;
    border: 1px solid var(--sc-line);
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    color: var(--sc-ink);
    font-size: 11px;
    font-family: inherit;
}
@media (max-width: 576px) {
    .ssearch .ssearch-dialog { margin-top: 12px; padding: 0 10px; }
    .ssearch .ssearch-input { font-size: 16px; }
    .ssearch-submit { display: none; }
}

/* ---------- phone tab bar ---------- */
.mtab, .mtab-space { display: none; }
@media (max-width: 576px) {
    .mtab-space { display: block; height: calc(96px + env(safe-area-inset-bottom, 0px)); }
    .mtab {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 350;
        display: flex;
        align-items: stretch;
        height: 64px;
        padding: 0 4px;
        border-radius: 22px;
        background: #fff;
        /* drop-shadow (not box-shadow) so the shadow follows the bump too */
        filter: drop-shadow(0 -1px 1px rgba(16, 40, 26, .05)) drop-shadow(0 8px 18px rgba(16, 40, 26, .14));
    }
    .mtab-item {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: #7a877f !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
    }
    .mtab-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 28px;
        border-radius: 14px;
        transition: background-color .25s, color .25s, transform .2s var(--sc-ease);
    }
    .mtab-icon svg { width: 22px; height: 22px; }
    .mtab-label {
        position: relative;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
    }
    .mtab-item.is-active { color: var(--sc-green-ink) !important; }
    .mtab-item.is-active .mtab-icon { background: var(--sc-green-soft); }
    .mtab-item:active .mtab-icon, .mtab-item:active .mtab-fab { transform: scale(.92); }

    /* the middle tab: the bar swells into a half circle around a round button.
       Geometry (relative to the tab's top centre): bump circle r=38 centred 10px
       below the bar's top edge; r=12 fillets tangent to both round the joins. */
    .mtab-cta { justify-content: flex-end; padding-bottom: 9px; }
    .mtab-bump {
        position: absolute;
        top: -28px;
        left: 50%;
        width: 76px;
        height: 76px;
        margin-left: -38px;
        border-radius: 50%;
        background: #fff;
    }
    .mtab-bump:before, .mtab-bump:after {
        content: "";
        position: absolute;
        top: 16px;
        width: 15px;
        height: 12px;
    }
    .mtab-bump:before { left: -7px; background: radial-gradient(circle at 0 0, transparent 11.5px, #fff 12px); }
    .mtab-bump:after { left: 68px; background: radial-gradient(circle at 100% 0, transparent 11.5px, #fff 12px); }
    .mtab-fab {
        position: absolute;
        top: -18px;
        left: 50%;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        margin-left: -28px;
        border-radius: 50%;
        background: var(--sc-green);
        color: #fff;
        box-shadow: 0 6px 14px rgba(17, 156, 77, .38);
        transition: transform .2s var(--sc-ease);
    }
    .mtab-fab svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
    .mtab-cta .mtab-label { color: var(--sc-green-ink); }

    .mtab-badge {
        position: absolute;
        top: -5px;
        right: 4px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border: 2px solid #fff;
        border-radius: 9px;
        background: #e5394d;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 14px;
        text-align: center;
    }

    /* the "unpaid instalment" / "unpaid order" notices sit just above the bar */
    .mrn-fixed-mobile-footer {
        left: 10px;
        right: 10px;
        bottom: calc(110px + env(safe-area-inset-bottom, 0px));
        width: auto;
        height: auto;
        min-height: 40px;
        padding: 8px 14px;
        border-radius: 14px;
        background-color: #e5394d;
        box-shadow: 0 6px 18px rgba(229, 57, 77, .3);
        opacity: 1;
        font-size: 13px;
    }
    .mrn-fixed-mobile-footer > div { float: none; width: 100%; padding: 0 !important; text-align: center; }
    .scrollToTop { bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
    .sfoot *, .mtab *, .ssearch *, section.clients img { transition: none !important; }
}
