/**
 * cnhowovehicle 主题 — 手机底栏 mfoot 覆盖
 * 系统模板：Homes/Tpl/_common/Public/mfoot.html
 */
:root {
    --xy-mfoot-bg: rgba(255, 255, 255, 0.96);
    --xy-mfoot-border: rgba(0, 0, 0, 0.06);
    --xy-mfoot-color: #666;
    --xy-mfoot-hover: #a67c00;
    --xy-mfoot-hover-bg: #fffcf4;
    --xy-mfoot-wa: #128C7E;
    --xy-mfoot-wa-bg: rgba(18, 140, 126, 0.1);
    --xy-mfoot-phone: #FEBC2A;
    --xy-mfoot-phone-bg: rgba(254, 188, 42, 0.12);
    --xy-mfoot-mail: #5b7cfa;
    --xy-mfoot-mail-bg: rgba(91, 124, 250, 0.1);
    --xy-mfoot-inquiry: #e5a926;
    --xy-mfoot-inquiry-bg: rgba(254, 188, 42, 0.14);
    --xy-mfoot-top-bg: linear-gradient(135deg, #FEBC2A 0%, #e5a926 100%);
    --xy-mfoot-top-hover: linear-gradient(135deg, #ffd054 0%, #FEBC2A 100%);
    --xy-mfoot-z: 1030;
    --xy-mfoot-height: 56px;
}

@media screen and (max-width: 768px) {
    body {
        padding-bottom: calc(var(--xy-mfoot-height) + env(safe-area-inset-bottom, 0px));
    }

    .mfoot_box {
        display: block;
        background: var(--xy-mfoot-bg);
        border: none;
        border-top: 1px solid var(--xy-mfoot-border);
        min-height: var(--xy-mfoot-height);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mfoot_inner {
        height: var(--xy-mfoot-height);
        max-width: 640px;
        margin: 0 auto;
    }

    .mfoot_nav {
        border-right: 1px solid var(--xy-mfoot-border);
    }

    .mfoot_nav a {
        gap: 4px;
        padding: 6px 4px;
        outline: none;
        border-radius: 0;
    }

    .mfoot_nav a:focus {
        outline: none;
    }

    .mfoot_nav a:focus-visible {
        box-shadow: inset 0 0 0 2px rgba(254, 188, 42, 0.55);
        background: var(--xy-mfoot-hover-bg);
    }

    /* 主题页多未引 Font Awesome；将 mfoot 的 fa 映射为已加载的 w102-iconfont */
    .mfoot_nav .fa,
    .mfoot_nav .w102-iconfont,
    .mfoot_nav .xy-iconfont {
        font-family: "w102-iconfont" !important;
        font-style: normal;
        font-weight: normal;
        font-size: 19px;
        line-height: 1;
        margin-bottom: 2px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .mfoot_nav .fa-whatsapp:before {
        content: "\eeb2";
    }

    .mfoot_nav .fa-phone:before {
        content: "\e746";
    }

    .mfoot_nav .fa-envelope-o:before {
        content: "\e6da";
    }

    .mfoot_nav .fa-comment-o:before {
        content: "\e6fc";
    }

    .mfoot_top_btn .fa-arrow-up:before {
        content: "\e846";
    }

    .mfoot_label {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: inherit;
    }

    /* WhatsApp */
    .mfoot_nav:nth-child(1) a {
        color: var(--xy-mfoot-wa);
    }

    .mfoot_nav:nth-child(1) a:hover,
    .mfoot_nav:nth-child(1) a:focus-visible {
        color: var(--xy-mfoot-wa);
        background: var(--xy-mfoot-wa-bg);
    }

    /* Phone */
    .mfoot_nav:nth-child(2) a {
        color: #555;
    }

    .mfoot_nav:nth-child(2) a .fa,
    .mfoot_nav:nth-child(2) a .w102-iconfont {
        color: var(--xy-mfoot-phone);
    }

    .mfoot_nav:nth-child(2) a:hover,
    .mfoot_nav:nth-child(2) a:focus-visible {
        color: var(--xy-mfoot-hover);
        background: var(--xy-mfoot-phone-bg);
    }

    /* E-mail */
    .mfoot_nav:nth-child(4) a .fa,
    .mfoot_nav:nth-child(4) a .w102-iconfont {
        color: var(--xy-mfoot-mail);
    }

    .mfoot_nav:nth-child(4) a:hover,
    .mfoot_nav:nth-child(4) a:focus-visible {
        color: var(--xy-mfoot-mail);
        background: var(--xy-mfoot-mail-bg);
    }

    /* Inquiry */
    .mfoot_nav:nth-child(5) a .fa,
    .mfoot_nav:nth-child(5) a .w102-iconfont {
        color: var(--xy-mfoot-inquiry);
    }

    .mfoot_nav:nth-child(5) a:hover,
    .mfoot_nav:nth-child(5) a:focus-visible {
        color: var(--xy-mfoot-hover);
        background: var(--xy-mfoot-inquiry-bg);
    }

    /* Back to top */
    .mfoot_nav_top a {
        padding: 0;
    }

    .mfoot_top_btn {
        width: 36px;
        height: 36px;
        background: var(--xy-mfoot-top-bg);
        box-shadow: 0 3px 12px rgba(254, 188, 42, 0.35);
    }

    .mfoot_nav_top a:hover .mfoot_top_btn,
    .mfoot_nav_top a:focus-visible .mfoot_top_btn {
        background: var(--xy-mfoot-top-hover);
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(254, 188, 42, 0.45);
    }

    .mfoot_top_btn .fa,
    .mfoot_top_btn .w102-iconfont {
        margin-bottom: 0;
        font-size: 14px;
        color: #fff;
    }
}