/* ═══════════════════════════════════════════
   mk-share-bar 模块私有样式
   所有 class/id 使用 mk-share- 前缀，防止全局污染
═══════════════════════════════════════════ */

/* ── 操作栏容器 ── */
.mk-share-bar {
    /* 与上方 action-buttons 的间距，建议 12–16px */
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 上方分隔线，建议 1px / #e0e0e0–#ebebeb */
   
    font-family: Inter, "Noto Sans SC", -apple-system, sans-serif;
    /* 整体字号，建议 12–14px */
    font-size: 13px;
    line-height: 1;
}

/* ── 左组 / 右组通用 ── */
.mk-share-bar__left,
.mk-share-bar__right {
    display: flex;
    align-items: center;
    /* 图标与文字间距，建议 4–8px */
    gap: 6px;
    cursor: pointer;
    user-select: none;
    /* 上下点击区域扩展，建议 2–6px */
    padding: 4px 0;
}

/* 左组内缩，建议 0–24px */
.mk-share-bar__left  { margin-left:  20px; }
/* 右组内缩，建议 0–24px */
.mk-share-bar__right { margin-right: 70px; }

/* SVG 图标通用 */
.mk-share-bar__icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    flex-shrink: 0;
    /* 微调垂直位置，正值下移，负值上移，建议 -2px ~ 2px */
    position: relative;
    top: -1px;
    transition: opacity 150ms ease;
}

/* 右侧分享图标：默认灰色，hover 变品牌蓝（通过 color 控制 currentColor） */
.mk-share-link-icon {
    /* 默认灰色，建议 #6e6e73–#8e8e93 */
    color: #0571e3;
    /* 颜色过渡，建议 120–180ms */
    transition: color 150ms ease;
}
.mk-share-bar__right:hover .mk-share-link-icon { color: #0571e3; }

/* ── 左组文字 ── */
.mk-share-consult-gray {
    color: #6e6e73;
    transition: color 150ms ease;
}
.mk-share-consult-blue {
    color: #0571e3;
    transition: color 150ms ease;
}
.mk-share-bar__left:hover .mk-share-consult-gray { color: #1d1d1f; }
.mk-share-bar__left:hover .mk-share-consult-blue { color: #0464cc; }

/* ── 右组文字 ── */
.mk-share-link-label {
    /* 默认灰色，hover 变品牌蓝，建议 #6e6e73 */
    color: #6e6e73;
    transition: color 150ms ease;
}
.mk-share-bar__right:hover .mk-share-link-label { color: #0571e3; }

/* 复制成功状态 */
.mk-share-bar__right.is-copied .mk-share-link-label { color: #34C759; }
.mk-share-bar__right.is-copied .mk-share-link-icon  { color: #34C759; }

/* 键盘聚焦态 */
.mk-share-bar__left:focus-visible,
.mk-share-bar__right:focus-visible {
    outline: 2px solid #0571e3;
    outline-offset: 3px;
    border-radius: 4px;
}


/* ── 弹窗遮罩 ── */
#mk-share-overlay {
    position: fixed;
    inset: 0;
    /* 遮罩透明度，建议 rgba(0,0,0,0.15–0.35) */
    background: rgba(0,0,0,0.25);
    z-index: 9998;
    display: none;
    opacity: 0;
    /* 渐显，建议 150–250ms */
    transition: opacity 200ms ease;
}
#mk-share-overlay.mk-share-overlay--visible { opacity: 1; }


/* ── 弹窗卡片 ── */
#mk-share-popup {
    position: fixed;
    /* 弹窗宽度，建议 300–360px */
    width: 320px;
    max-width: calc(100vw - 32px);
    background: #FFFFFF;
    /* 圆角，建议 12–20px */
    border-radius: 16px;
    /* 阴影，建议 0 4px 24px rgba(0,0,0,0.06–0.12) */
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    /* 内边距，建议 16–24px */
    padding: 20px;
    z-index: 9999;
    display: none;
    opacity: 0;
    transform: translateY(10px);
    /* 出现动画，建议 200–260ms */
    transition:
        opacity   220ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
    font-family: Inter, "Noto Sans SC", -apple-system, sans-serif;
}
#mk-share-popup.mk-share-popup--visible {
    opacity: 1;
    transform: translateY(0);
}
#mk-share-popup.mk-share-popup--closing {
    opacity: 0;
    transform: translateY(10px);
    /* 收起略快，建议 160–200ms */
    transition:
        opacity   180ms ease-in,
        transform 180ms ease-in;
}


/* ── 标题行 ── */
.mk-share-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 与下方内容间距，建议 10–16px */
    margin-bottom: 12px;
}
.mk-share-popup__title {
    /* 标题字号，建议 14–16px */
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
}
.mk-share-popup__close {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 热区尺寸，建议 24–32px */
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    /* × 大小，建议 18–22px */
    font-size: 20px;
    color: #6e6e73;
    border-radius: 50%;
    line-height: 1;
    padding: 0;
    transition: color 140ms ease, background 140ms ease;
    flex-shrink: 0;
}
.mk-share-popup__close:hover { color: #1d1d1f; background: #f2f2f7; }


/* ── 在线状态 ── */
.mk-share-popup__status {
    display: flex;
    align-items: center;
    gap: 6px;
    /* 与下方分隔线间距，建议 8–14px */
    margin-bottom: 10px;
}
.mk-share-popup__dot {
    /* 绿点直径，建议 6–9px */
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34C759;
    flex-shrink: 0;
}
.mk-share-popup__status-text {
    /* 状态字号，建议 12–14px */
    font-size: 13px;
    color: #6e6e73;
    line-height: 1.4;
}


/* ── 过滤提示 ── */
.mk-share-popup__divider {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin-bottom: 10px;
}
.mk-share-popup__hint {
    /* 过滤提示字号，建议 11–13px */
    font-size: 12px;
    color: #6e6e73;
    line-height: 1.6;
    opacity: 0.85;
    /* 与输入框间距，建议 12–16px */
    margin-bottom: 14px;
}


/* ── 表单元素通用 ── */
.mk-share-popup__textarea,
.mk-share-popup__input {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    /* 输入字号，建议 13–15px */
    font-size: 14px;
    color: #1d1d1f;
    line-height: 1.6;
    /* 边框粗细，建议 1–1.5px */
    border: 1.5px solid #e0e0e0;
    /* 圆角，建议 8–12px */
    border-radius: 10px;
    padding: 12px;
    background: #FFFFFF;
    outline: none;
    transition: border-color 160ms ease;
    -webkit-appearance: none;
    display: block;
}
.mk-share-popup__textarea::placeholder,
.mk-share-popup__input::placeholder { color: #b0b0b0; }
.mk-share-popup__textarea:focus,
.mk-share-popup__input:focus        { border-color: #0571e3; }

/* textarea 高度，建议 72–100px */
.mk-share-popup__textarea { height: 88px; resize: none; }

/* 联系方式单行 */
.mk-share-popup__input {
    height: 44px;
    padding: 0 12px;
    line-height: 44px;
    /* 与 textarea 间距 */
    margin-top: 10px;
}

/* ── 错误提示 ── */
.mk-share-popup__error {
    /* 错误字号，建议 12–13px */
    font-size: 12px;
    /* 错误红，建议 #ff3b30–#ff453a */
    color: #ff3b30;
    min-height: 0;
    margin-top: 6px;
    line-height: 1.4;
}


/* ── 发送按钮 ── */
.mk-share-popup__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* 按钮高度，建议 42–50px */
    height: 46px;
    border: none;
    /* 圆角，建议 10–14px */
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    color: #FFFFFF;
    /* 与输入框间距，建议 12–16px */
    margin-top: 14px;
    transition: background 160ms ease, opacity 160ms ease;
    /* 默认禁用态，建议 #b0c8f0 */
    background: #b0c8f0;
    cursor: not-allowed;
}
.mk-share-popup__submit.mk-share-submit--active {
    background: #0571e3;
    cursor: pointer;
}
.mk-share-popup__submit.mk-share-submit--active:hover { background: #0464cc; }
.mk-share-popup__submit.mk-share-submit--loading { opacity: 0.7; cursor: not-allowed; }


/* ── 提交成功视图 ── */
.mk-share-popup__success {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 上下留白，建议 12–20px */
    padding: 16px 0;
    gap: 10px;
    animation: mkShareFadeIn 300ms ease forwards;
}
.mk-share-popup__success.mk-share-success--visible { display: flex; }

@keyframes mkShareFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.mk-share-popup__success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 圆形尺寸，建议 44–56px */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f0faf0;
    margin-bottom: 2px;
}
.mk-share-popup__success-icon span {
    /* ✓ 大小，建议 20–26px */
    font-size: 22px;
    color: #34C759;
    line-height: 1;
}
.mk-share-popup__success-title {
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    text-align: center;
}
.mk-share-popup__success-desc {
    font-size: 13px;
    color: #6e6e73;
    text-align: center;
    line-height: 1.6;
    /* 最大宽度防过宽，建议 240–300px */
    max-width: 280px;
}