@CHARSET "UTF-8";
/* ============================================================
   V-Ran 蔚然远行 - 前台联系方式样式
   依赖: Bootstrap 3, Font Awesome 4.4
   配色: #1e9fd8(青蓝) / #1b5c94(深蓝) / #eaf6fd(浅底)
   涉及:
     - footer 4 列布局 + 微信二维码卡片
     - 全站右下角浮动联系组件（电话/手机/QQ/微信）
   ============================================================ */

/* ---------- Footer 4 列布局 ---------- */
.vr-footer {
    background: #143d66;
    color: rgba(255, 255, 255, .82);
    padding: 42px 0 22px;
    margin-top: 40px;
    font-size: 13px;
}

.vr-footer .row > [class*="col-"] {
    margin-bottom: 18px;
}

/* 品牌区：白底圆角卡片承载透明底 logo，与右侧三列统一左对齐，
   卡片宽度随内容收缩，避免整列大白块 */
.vr-footer-brand {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 16px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .16);
}

.vr-footer-logo {
    display: block;
    height: 88px;
    width: auto;
}

.vr-footer-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 1.5;
    margin: 0 0 8px;
    letter-spacing: .5px;
}

.vr-footer-desc {
    margin: 0;
    line-height: 1.9;
    color: rgba(255, 255, 255, .68);
    font-size: 13px;
}

.vr-footer-title {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin: 6px 0 14px;
    position: relative;
    padding-left: 12px;
}

.vr-footer-title:before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 3px;
    background: #1e9fd8;
    border-radius: 2px;
}

/* 联系方式列表（电话/手机/QQ） */
.vr-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vr-contact-list li {
    margin-bottom: 11px;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
}

.vr-contact-list li .vr-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(30, 159, 216, .18);
    color: #5ec6ec;
    font-size: 12px;
    margin-right: 10px;
    flex-shrink: 0;
    margin-top: 1px;
}

.vr-contact-list li a {
    color: rgba(255, 255, 255, .88);
    text-decoration: none;
    transition: color .2s ease;
}

.vr-contact-list li a:hover {
    color: #5ec6ec;
    text-decoration: none;
}

.vr-contact-list li .vr-contact-label {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 1px;
}

/* 多号码块（手机/QQ） */
.vr-contact-multiple {
    display: block;
}

.vr-contact-multiple a {
    display: inline-block;
    margin-right: 12px;
}

/* 快速导航 */
.vr-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vr-footer-links li {
    margin-bottom: 9px;
}

.vr-footer-links a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    transition: color .2s ease;
}

.vr-footer-links a:hover {
    color: #fff;
    text-decoration: none;
}

.vr-footer-links .fa {
    font-size: 11px;
    margin-right: 6px;
    color: #1e9fd8;
}

/* 微信二维码卡片 */
.vr-qr-card {
    background: #fff;
    padding: 10px 10px 8px;
    border-radius: 6px;
    text-align: center;
    width: 138px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

.vr-qr-card img {
    display: block;
    width: 118px;
    height: 118px;
}

.vr-qr-card .vr-qr-tip {
    margin-top: 4px;
    color: #1b5c94;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.vr-qr-card .vr-qr-sub {
    color: #8a9099;
    font-size: 10px;
    line-height: 1.3;
}

.vr-footer-hr {
    border-color: rgba(255, 255, 255, .14);
    margin: 8px 0 14px;
}

.vr-footer-bottom {
    text-align: center;
    color: rgba(255, 255, 255, .55);
}

.vr-footer-bottom > span {
    display: inline-block;
    margin: 0 10px 4px;
}

.vr-footer-bottom a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
}

.vr-footer-bottom a:hover {
    color: #fff;
}

/* ---------- 全站右下角浮动组件 ---------- */
.vr-float-contact {
    position: fixed;
    right: 18px;
    bottom: 80px;
    z-index: 9990;
    width: 58px;
    /* 避免被顶部 86px navbar 遮挡，吸顶时也始终可点 */
}

.vr-fc-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 50%;
    color: #1b5c94;
    font-size: 22px;
    margin-bottom: 8px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(20, 61, 102, .12);
    transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
    text-decoration: none;
}

.vr-fc-btn:hover {
    background: #1e9fd8;
    color: #fff;
    border-color: #1e9fd8;
    box-shadow: 0 6px 16px rgba(30, 159, 216, .28);
    transform: translateY(-2px);
    text-decoration: none;
}

.vr-fc-btn:active {
    transform: translateY(0);
}

/* 按钮上的小文字标签 */
.vr-fc-btn .vr-fc-label {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%) scale(.95);
    background: #143d66;
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.vr-fc-btn .vr-fc-label:after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: #143d66;
}

.vr-fc-btn:hover .vr-fc-label {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* hover 弹出的二维码面板 */
.vr-fc-popover {
    position: absolute;
    right: 70px;
    bottom: 0;
    width: 160px;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    padding: 12px 12px 10px;
    box-shadow: 0 8px 24px rgba(20, 61, 102, .18);
    opacity: 0;
    pointer-events: none;
    transform: translateX(8px);
    transition: opacity .22s ease, transform .22s ease;
    text-align: center;
}

.vr-fc-popover.vr-show {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.vr-fc-popover:before {
    content: "";
    position: absolute;
    right: -6px;
    bottom: 18px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-right: 1px solid #e6e8eb;
    border-top: 1px solid #e6e8eb;
    transform: rotate(45deg);
}

.vr-fc-popover img {
    display: block;
    width: 136px;
    height: 136px;
    margin: 0 auto;
}

.vr-fc-popover .vr-fc-popover-title {
    margin-top: 6px;
    color: #1b5c94;
    font-size: 13px;
    font-weight: 600;
}

.vr-fc-popover .vr-fc-popover-sub {
    color: #8a9099;
    font-size: 11px;
}

/* 回到顶部按钮单独颜色 */
.vr-fc-btn.vr-fc-top {
    background: #f6f8fa;
    color: #8a9099;
    font-size: 20px;
}

.vr-fc-btn.vr-fc-top:hover {
    background: #1b5c94;
    color: #fff;
    border-color: #1b5c94;
}

/* ---------- 响应式 ---------- */

/* 小窗口 / 平板竖屏（768–991px）
   原 col-sm-3 在此区间仍是 4 列，每列仅约 173px，手机号与地址会被挤断换行。
   栅格已改为 col-md-3 col-sm-6，此区间自动变为 2 列，这里只做尺寸微调。 */
@media (min-width: 768px) and (max-width: 991px) {
    .vr-footer .row > [class*="col-"] {
        margin-bottom: 26px;
    }

    .vr-footer-brand {
        padding: 10px 16px;
    }

    .vr-footer-logo {
        height: 74px;
    }

    .vr-qr-card {
        width: 130px;
    }

    .vr-qr-card img {
        width: 110px;
        height: 110px;
    }
}

/* 手机 / 窄窗口（<768px）：单列堆叠 + 居中 */
@media (max-width: 767px) {
    .vr-footer {
        text-align: center;
        padding: 30px 0 18px;
    }

    .vr-footer-brand {
        justify-content: center;
        padding: 10px 16px;
    }

    .vr-footer-logo {
        height: 66px;
    }

    .vr-footer-desc {
        margin: 0 auto;
        max-width: 320px;
    }

    /* 单列堆叠时用细分隔线划分区块，避免四块内容糊成一团 */
    .vr-footer .row > [class*="col-"] {
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .vr-footer .row > [class*="col-"]:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 16px;
    }

    .vr-contact-list li {
        justify-content: center;
        margin-bottom: 13px;
    }

    /* 双号码（手机 / QQ）居中排列，不再贴左显参差 */
    .vr-contact-multiple {
        text-align: center;
    }

    .vr-contact-multiple a {
        margin: 0 6px;
    }

    .vr-footer-title {
        margin-top: 14px;
    }

    .vr-qr-card {
        margin: 0 auto;
    }

    /* 版权行竖排，窄屏不再被挤成参差折行 */
    .vr-footer-bottom > span {
        display: block;
        margin: 0 0 5px;
    }

    /* 移动端浮动组件缩到 50px，减小占屏 */
    .vr-float-contact {
        right: 10px;
        bottom: 70px;
        width: 50px;
    }

    .vr-fc-btn {
        width: 50px;
        height: 50px;
        font-size: 19px;
        margin-bottom: 6px;
    }

    .vr-fc-btn .vr-fc-label {
        display: none; /* 移动端不弹文字，节省空间 */
    }

    .vr-fc-popover {
        right: 60px;
        width: 140px;
    }

    .vr-fc-popover img {
        width: 116px;
        height: 116px;
    }
}

/* 极窄屏（<400px）：进一步压缩，保证 320px 宽也不溢出 */
@media (max-width: 400px) {
    .vr-footer {
        padding: 24px 0 16px;
        font-size: 12.5px;
    }

    .vr-footer-logo {
        height: 56px;
    }

    .vr-footer-name {
        font-size: 14px;
    }

    .vr-footer-desc {
        font-size: 12.5px;
        line-height: 1.8;
    }

    .vr-contact-list li {
        font-size: 12.5px;
    }

    /* 极窄屏双号码分行，避免挤压换行 */
    .vr-contact-multiple a {
        display: block;
        margin: 0 0 2px;
    }

    .vr-qr-card {
        width: 124px;
        padding: 8px 8px 6px;
    }

    .vr-qr-card img {
        width: 108px;
        height: 108px;
    }

    .vr-float-contact {
        right: 6px;
        bottom: 60px;
    }

    .vr-fc-btn {
        width: 46px;
        height: 46px;
        font-size: 17px;
    }
}