/* ==================================================================
 * 登录页「关注公众号」入口 + 底部弹层（游客 /index、商家 /seller-login 共用）
 * 说明：ui-redesign.css 里有 button 级的 !important 圆角/配色规则，
 *       本文件统一用 #followMask / .container .btn-follow 提高优先级覆盖，
 *       避免弹层按钮被全局主题改成方块。
 * ================================================================== */

/* ---- 登录卡片内的次要入口（保留原界面，只加这一行） ---- */
.container .follow-entry { margin-top: 14px; }
.container .btn-follow {
    width: 100%;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid #07c160 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #07a854 !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.container .btn-follow:active { background: #f2fbf5 !important; }
.container .btn-follow svg { width: 16px; height: 16px; fill: #07a854; flex-shrink: 0; }
.container .follow-note { text-align: center; font-size: 11px; color: #b3bcc0; margin-top: 6px; }

/* ---- 全屏遮罩 + 底部上滑半屏卡片 ---- */
#followMask.follow-mask {
    position: fixed; inset: 0; z-index: 1000;
    display: none;
    align-items: flex-end; justify-content: center;
    background: rgba(0, 0, 0, .45) !important;
}
#followMask.follow-mask.show { display: flex; }
#followMask .follow-sheet {
    position: relative;
    width: 100%; max-width: 460px;
    max-height: 88vh; overflow-y: auto;
    background: #fff;
    border-radius: 22px 22px 0 0 !important;
    padding: 26px 22px calc(20px + env(safe-area-inset-bottom));
    text-align: center;
    box-sizing: border-box;
    animation: followUp .22s ease-out;
}
@keyframes followUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* 关闭按钮：必须保持绝对定位在右上角，不能被任何「点击加固」规则改成 relative */
#followMask .follow-close {
    position: absolute !important;
    right: 14px !important;
    top: 12px !important;
    width: 30px !important; height: 30px !important; min-height: 30px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 22px !important;
    line-height: 1;
    color: #9aa6aa !important;
    cursor: pointer;
}
#followMask .follow-title { font-size: 17px; font-weight: 700; color: #183a33; }
#followMask .follow-sub { font-size: 12.5px; color: #8b989c; margin-top: 7px; line-height: 1.5; }
#followMask .follow-qr {
    width: 184px; height: 184px; margin: 18px auto 12px; padding: 9px;
    border: 1px solid #e7edeb; border-radius: 14px; background: #fff;
    box-shadow: 0 4px 16px rgba(24, 58, 51, .07);
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
}
#followMask .follow-qr-img { width: 100%; height: 100%; display: block; object-fit: contain; }
#followMask .follow-hint { font-size: 13px; color: #183a33; font-weight: 500; }
#followMask .follow-hint b { color: #07a854; }
#followMask .follow-alt-tip { font-size: 11px; color: #9aa6aa; margin-top: 8px; line-height: 1.5; }
#followMask .follow-tip { font-size: 12px; color: #df5c63; margin-top: 8px; }
#followMask .follow-reload {
    display: inline-block; margin-top: 10px; padding: 6px 14px;
    border: 1px solid #cfdedb !important; border-radius: 999px !important;
    background: #f6f9f8 !important; color: #0b6b6f !important;
    font-size: 12px !important; min-height: 32px !important;
    cursor: pointer;
}
#followMask .follow-ok {
    width: 100%; height: 44px !important; min-height: 44px !important;
    margin-top: 18px;
    border: none !important; border-radius: 999px !important;
    background: #07c160 !important; color: #fff !important;
    box-shadow: none !important;
    font-size: 15px !important; font-weight: 600;
    cursor: pointer;
}
#followMask .follow-ok:active { background: #06ad56 !important; }

@media (prefers-reduced-motion: reduce) {
    #followMask .follow-sheet { animation: none; }
}