/* ===== 右侧浮动栏（登录 / 注册 / 客服 / 回顶部，参考首页的悬浮工具条） =====
   全站通用：新旧两套页头都引用这个文件；配色跟随后台主色变量 --c1 */
/* ===== 右侧浮动栏（仅 PC，参考 26/index.php 的悬浮工具条：渐变方块 + 呼吸光晕 + 图标浮动） ===== */
.float-rail {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 60px;
    z-index: 9999;
    gap: 10px;
}

.float-rail__item {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 64px;
    height: 64px;
    padding: 0;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--c1, #2B6CFF) 0%, var(--c1-dark, #2155FF) 100%);
    box-shadow: 0 4px 10px 1px rgba(var(--c1-rgb, 43, 108, 255), .35);
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    animation: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.float-rail__item:hover,
.float-rail__item:focus-visible {
    outline: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px 1px rgba(var(--c1-rgb, 43, 108, 255), .5);
}

/* 登录 / 入驻保持静态：不要呼吸光晕、不要浮动、hover 也不位移 */
.float-rail__item--login,
.float-rail__item--join {
    animation: none;
    transition: none;
}

.float-rail__item--login:hover,
.float-rail__item--login:focus-visible,
.float-rail__item--join:hover,
.float-rail__item--join:focus-visible {
    transform: none;
    box-shadow: 0 4px 10px 1px rgba(var(--c1-rgb, 43, 108, 255), .35);
}

.float-rail__item--login .float-rail__icon,
.float-rail__item--join .float-rail__icon { animation: none; }

.float-rail__item span {
    display: block;
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* 「登录」那个按钮是 <button>（点它开弹窗，不跳页），跟 <a> 长得一样就行 */
button.float-rail__item {
    font-family: inherit;
    font-size: 12px;
    -webkit-appearance: none;
    appearance: none;
}

/* 呼吸光晕 + 图标上下浮动（同 26/index.php 的 kefuPulse / kefuFloat） */
@keyframes railPulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--c1-rgb, 43, 108, 255), .5); }
    70% { box-shadow: 0 0 0 14px rgba(var(--c1-rgb, 43, 108, 255), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--c1-rgb, 43, 108, 255), 0); }
}
@keyframes railFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.float-rail__icon {
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
    margin: 7px auto 0;
    color: currentColor;
    animation: none;
}

/* 这三个是 <a>，会被上面 .fk-page a{color:inherit} 拽回正文色，
   这里把优先级抬上去，保证图标（currentColor 画的）是白的 */
.float-rail .float-rail__item--login,
.float-rail .float-rail__item--login .float-rail__icon,
.float-rail .float-rail__item--join,
.float-rail .float-rail__item--join .float-rail__icon,
.float-rail .float-rail__item--qr,
.float-rail .float-rail__item--qr .float-rail__icon { color: #FFFFFF; }

.float-rail__icon::before,
.float-rail__icon::after {
    content: "";
    position: absolute;
    display: block;
}

.float-rail__item--login .float-rail__icon::before {
    top: 6px;
    left: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.float-rail__item--login .float-rail__icon::after {
    bottom: 5px;
    left: 7px;
    width: 14px;
    height: 9px;
    border-radius: 8px 8px 4px 4px;
    background: currentColor;
}

.float-rail__item--join .float-rail__icon::before {
    top: 7px;
    left: 7px;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 6px;
}

.float-rail__item--join .float-rail__icon::after {
    top: 9px;
    left: 9px;
    width: 10px;
    height: 10px;
    background:
        linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat;
}

/* 在线客服：耳机图标（弓形头梁 + 两侧耳罩） */
.float-rail__item--qr .float-rail__icon::before {
    top: 6px;
    left: 5px;
    width: 18px;
    height: 9px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.float-rail__item--qr .float-rail__icon::after {
    top: 15px;
    left: 4px;
    width: 4px;
    height: 7px;
    border-radius: 2px;
    background: currentColor;
    box-shadow: 16px 0 0 currentColor;
}

/* 「平台自营」：跟着登录 / 注册一样保持静态（不呼吸、不位移） */
.float-rail__item--self { animation: none; transition: none; }
.float-rail__item--self:hover,
.float-rail__item--self:focus-visible {
    transform: none;
    box-shadow: 0 4px 10px 1px rgba(var(--c1-rgb, 43, 108, 255), .35);
}
.float-rail__item--self .float-rail__icon { animation: none; }
.float-rail .float-rail__item--self,
.float-rail .float-rail__item--self .float-rail__icon { color: #FFFFFF; }

/* 「用户中心」：和平台自营同一套（都是那间小店铺），登录后才出现 */
.float-rail__item--shop { animation: none; transition: none; }
.float-rail__item--shop:hover,
.float-rail__item--shop:focus-visible {
    transform: none;
    box-shadow: 0 4px 10px 1px rgba(var(--c1-rgb, 43, 108, 255), .35);
}
.float-rail__item--shop .float-rail__icon { animation: none; }
.float-rail .float-rail__item--shop,
.float-rail .float-rail__item--shop .float-rail__icon { color: #FFFFFF; }

/* 「用户中心」图标：一个人像（圆头 + 肩膀），跟右上角那个账号入口同一套，
   别画成房子 / 店铺——点进去是自己的账号，不是首页 */
.float-rail__item--shop .float-rail__icon::before {
    top: 5px;
    left: 9px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
}
.float-rail__item--shop .float-rail__icon::after {
    top: 16px;
    left: 5px;
    width: 18px;
    height: 8px;
    border-radius: 9px 9px 4px 4px;
    background: currentColor;
}

/* 「通知」：排在「用户中心」下面，跟它同一套（静态，不呼吸、不位移） */
.float-rail__item--notice { animation: none; transition: none; }
.float-rail__item--notice:hover,
.float-rail__item--notice:focus-visible {
    transform: none;
    box-shadow: 0 4px 10px 1px rgba(var(--c1-rgb, 43, 108, 255), .35);
}
.float-rail__item--notice .float-rail__icon { animation: none; }
.float-rail .float-rail__item--notice,
.float-rail .float-rail__item--notice .float-rail__icon { color: #FFFFFF; }

/* 图标：铃铛（半圆铃身 + 底沿横线） */
.float-rail__item--notice .float-rail__icon::before {
    top: 7px;
    left: 6px;
    width: 16px;
    height: 13px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}
.float-rail__item--notice .float-rail__icon::after {
    top: 19px;
    left: 4px;
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
}

/* 有未读通知时右上角的小红点（白圈包红心，压在渐变底上也醒目） */
.float-rail__dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: #E8232E;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* 「平台自营」图标：官方认证徽章（盾牌 + 对勾），跟「用户中心」的小店铺区分开
   对勾用主色画，压在白色盾牌上就是镂空的效果 */
.float-rail__item--self .float-rail__icon::before {
    top: 5px;
    left: 5px;
    width: 18px;
    height: 21px;
    background: currentColor;
    clip-path: polygon(50% 0, 100% 15%, 100% 62%, 50% 100%, 0 62%, 0 15%);
}
.float-rail__item--self .float-rail__icon::after {
    top: 13px;
    left: 10px;
    width: 8px;
    height: 5px;
    background: transparent;
    border-left: 2px solid var(--c1, #2B6CFF);
    border-bottom: 2px solid var(--c1, #2B6CFF);
    border-radius: 1px;
    transform: rotate(-45deg);
}

/* 「库存告急」：红色底 + 红色呼吸光晕，跟主色那几个蓝按钮拉开区分
   只在用户自己有商品库存不足时出现，点进去就是「我的商品」里筛好的告急清单 */
.float-rail__item--stock {
    background: linear-gradient(180deg, #FF6A4D 0%, #D92E20 100%);
    box-shadow: 0 4px 10px 1px rgba(217, 46, 32, .4);
    animation: railPulseRed 2s ease-in-out infinite;
}
.float-rail__item--stock:hover,
.float-rail__item--stock:focus-visible {
    outline: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px 1px rgba(217, 46, 32, .55);
}
.float-rail .float-rail__item--stock,
.float-rail .float-rail__item--stock .float-rail__icon { color: #FFFFFF; }

@keyframes railPulseRed {
    0% { box-shadow: 0 0 0 0 rgba(217, 46, 32, .5); }
    70% { box-shadow: 0 0 0 14px rgba(217, 46, 32, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 46, 32, 0); }
}

/* 图标：白色警示三角 + 深红色感叹号（竖条 + 圆点，用两段渐变画） */
.float-rail__item--stock .float-rail__icon::before {
    top: 5px;
    left: 4px;
    width: 20px;
    height: 18px;
    background: currentColor;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.float-rail__item--stock .float-rail__icon::after {
    top: 10px;
    left: 12px;
    width: 4px;
    height: 11px;
    background:
        linear-gradient(#D92E20, #D92E20) top center / 4px 6px no-repeat,
        linear-gradient(#D92E20, #D92E20) bottom center / 4px 4px no-repeat;
}
.float-rail__item--stock .float-rail__icon { animation: railFloat 1.6s ease-in-out infinite; }

/* 右上角告急件数小红点（白底红字，压在红按钮上也看得清） */
.float-rail__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 9px;
    background: #FFFFFF;
    color: #D92E20;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

@media (min-width: 1081px) and (max-width: 1300px) {
    .float-rail__item--stock .float-rail__icon { margin: 15px auto 0; }
}

/* 客服按钮：保留呼吸光晕 + 图标上下浮动 */
.float-rail__item--qr { animation: railPulse 2s ease-in-out infinite; }
.float-rail__item--qr .float-rail__icon { animation: railFloat 1.6s ease-in-out infinite; }

/* 回到顶部用白卡片，和上面几个拉开区分（同 26/index.php 的 back-top） */
.float-rail__item--top {
    font-family: inherit;
    color: var(--c1-dark, #2155FF);
    background: linear-gradient(180deg, #FFFFFF 0%, #F6F7FF 100%);
    box-shadow: 0 4px 10px 1px rgba(55, 99, 170, .2);
    animation: none;
}

.float-rail__item--top span { color: #55618A; }

.float-rail__item--top .float-rail__icon { animation: none; }

.float-rail__item--top.is-hidden { display: none; }

.float-rail__item--top .float-rail__icon::before {
    top: 9px;
    left: 9px;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(45deg);
}

.float-rail__item--top .float-rail__icon::after {
    top: 15px;
    left: 13px;
    width: 2px;
    height: 9px;
    background: currentColor;
}

@media (min-width: 1081px) {
    .float-rail { display: grid; }
}

@media (min-width: 1081px) and (max-width: 1300px) {
    .float-rail { right: 10px; }
    .float-rail__item { width: 56px; height: 56px; }
    .float-rail__item span { display: none; }
    .float-rail__icon { width: 24px; height: 24px; margin: 15px auto 0; }
}