/* YDS MPT v1.0.20.16 Critical CSS: only the always-visible floating launcher. */
/* --- 最近瀏覽 LTS v8.10.30 Single Product Favorite Safe：桌機取消 hover 展開，保留點擊展開／收合，調整膠囊按鈕垂直間距 --- */

#vht-floating-wrap,
#vht-button,
#vht-panel,
#vht-backdrop{
    box-sizing:border-box;
}

#vht-floating-wrap{
    position:fixed;
    right:17px !important;
    bottom:calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    width:45px !important;
    min-width:45px !important;
    max-width:45px !important;
    height:45px !important;
    min-height:45px !important;
    max-height:45px !important;
    z-index:99980;
    overflow:visible !important;
    pointer-events:auto;
}

#vht-button{
    position:absolute;
    inset:0;
    width:45px !important;
    min-width:45px !important;
    max-width:45px !important;
    height:45px !important;
    min-height:45px !important;
    max-height:45px !important;
    padding:0 !important;
    margin:0 !important;
    background:linear-gradient(180deg,#eef7f7 0%,#d9ecee 100%) !important;
    border:1px solid rgba(141,184,186,.82) !important;
    color:#44696d !important;
    border-radius:15px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    box-shadow:0 8px 18px rgba(96,135,138,.22) !important;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
    appearance:none;
    -webkit-appearance:none;
    overflow:visible !important;
    text-decoration:none !important;
    font-family:inherit !important;
    z-index:2;
}

#vht-button .vht-main-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    color:#5b8083;
    pointer-events:none;
}

#vht-button .vht-main-icon svg{
    width:28px;
    height:28px;
    display:block;
    overflow:visible;
}

#vht-button .vht-main-icon svg *{
    fill:none;
    stroke:currentColor;
    stroke-width:1.72;
    stroke-linecap:round;
    stroke-linejoin:round;
}

#vht-button .vht-main-icon .vht-icon-card{
    stroke:#5b8083;
}

#vht-button .vht-main-icon .vht-icon-line{
    stroke:#6f9699;
    stroke-width:1.62;
}

#vht-button .vht-main-icon .vht-icon-heart{
    fill:#d6a49b !important;
    stroke:#c78d84 !important;
    stroke-width:1.35;
}

#vht-button:active{
    transform:translateY(1px);
}

#vht-button.vht-bounce{
    animation:vhtButtonBounce .40s cubic-bezier(.22,.72,.28,1);
}

@keyframes vhtButtonBounce{
    0%{ transform:translateY(0) scale(1); }
    42%{ transform:translateY(-4px) scale(1.04); }
    70%{ transform:translateY(1px) scale(.995); }
    100%{ transform:translateY(0) scale(1); }
}

#vht-floating-actions{
    position:absolute;
    right:calc(100% + 8px);
    bottom:0;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
    opacity:0;
    visibility:hidden;
    transform:translateX(8px) scale(.98);
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index:1;
}

/* 保留按鈕與膠囊之間的透明連接區，避免點擊膠囊時產生間隙。 */
#vht-floating-actions::after{
    content:"";
    position:absolute;
    top:-8px;
    bottom:-8px;
    right:-24px;
    width:32px;
    background:transparent;
    pointer-events:auto;
}

/* v8.10.29：快捷膠囊只由點擊切換，不再因桌機 hover / focus 自動展開。 */
#vht-floating-wrap.vht-action-open #vht-floating-actions{
    opacity:1;
    visibility:visible;
    transform:translateX(0) scale(1);
    pointer-events:auto;
}

button.vht-floating-action{
    height:34px;
    min-height:34px;
    width:126px;
    min-width:126px;
    max-width:126px;
    padding:0 10px 0 12px !important;
    margin:0 !important;
    border-radius:999px !important;
    border:1px solid rgba(255,255,255,.82) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:9px;
    box-shadow:0 7px 16px rgba(74,72,62,.15) !important;
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    font-family:inherit !important;
    font-size:13px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}

button.vht-floating-action-fav{
    background:linear-gradient(135deg,#fff7f3 0%,#f7dfdb 100%) !important;
    color:#9a706a !important;
    border-color:rgba(214,164,155,.58) !important;
}

button.vht-floating-action-history{
    background:linear-gradient(135deg,#f4faf9 0%,#d9eaec 100%) !important;
    color:#547c7f !important;
    border-color:rgba(141,184,186,.58) !important;
}

button.vht-floating-action-bis{
    background:linear-gradient(135deg,#fffaf0 0%,#f2e7c9 100%) !important;
    color:#8b754c !important;
    border-color:rgba(214,190,128,.62) !important;
}

.vht-floating-action-main{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    flex:1 1 auto;
    min-width:0;
}

.vht-floating-action-icon{
    display:none !important;
}

.vht-floating-action-label{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
}

.vht-floating-action-count{
    min-width:20px;
    height:20px;
    padding:0 6px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:600;
    line-height:20px;
    border:1px solid rgba(255,255,255,.88);
    box-shadow:0 2px 7px rgba(0,0,0,.08);
}

.vht-floating-action-fav .vht-floating-action-count{
    background:linear-gradient(135deg,#d6a49b 0%,#c78d84 100%);
    color:#fff;
}

.vht-floating-action-history .vht-floating-action-count{
    background:linear-gradient(135deg,#8db8ba 0%,#78a7aa 100%);
    color:#fff;
}

.vht-floating-action-bis .vht-floating-action-count{
    background:linear-gradient(135deg,#d6bd79 0%,#c5a85e 100%);
    color:#fff;
}

@media (hover:hover) and (pointer:fine){
    button.vht-floating-action:hover,
    button.vht-floating-action:focus-visible{
        transform:translateX(-2px);
        outline:none !important;
    }
}

@media (min-width:769px){
    #vht-floating-wrap{right:17px !important;bottom:110px !important;width:45px !important;height:45px !important;min-height:45px !important;}
}
@media (max-width:380px){
    #vht-floating-wrap{right:17px;bottom:calc(120px + env(safe-area-inset-bottom,0px));width:45px !important;min-width:45px !important;max-width:45px !important;height:45px !important;min-height:45px !important;max-height:45px !important;}
    #vht-floating-actions{right:calc(100% + 8px);gap:8px;}
    button.vht-floating-action{width:112px;min-width:112px;max-width:112px;height:32px;min-height:32px;padding-left:10px !important;padding-right:8px !important;font-size:12px;}
    .vht-floating-action-count{min-width:18px;height:18px;padding:0 5px;font-size:11px;line-height:18px;}
}
/* Keep the pre-rendered heavy UI inert until the on-demand stylesheet arrives. */
#vht-backdrop,#vht-panel,#vht-member-auth-backdrop,#vht-member-auth-modal{visibility:hidden;opacity:0;pointer-events:none;}
#vht-panel{position:fixed;transform:translateY(calc(110% + 120px));}
#vht-member-auth-backdrop,#vht-member-auth-modal{display:none;}
/* v1.0.20.17 Guest Modal Visibility Safe.
 * Critical CSS keeps inactive shells hidden; restore visibility as soon as
 * their existing JS adds the open class. No new request or observer.
 */
#vht-member-auth-backdrop.is-open,
#vht-member-auth-modal.is-open{
    visibility:visible;
    opacity:1;
}
#vht-member-auth-backdrop.is-open{pointer-events:auto;}
/* The drawer's matching dynamic state must also beat the inert base style. */
#vht-panel.vht-open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
}
#vht-backdrop.vht-open{
    visibility:visible;
    opacity:1;
}