/* 基礎定位：固定在右下角 */
.float-status-container {
    position: fixed;
    right: 15px;
    top: 96px;
    /* bottom: 75px; 避開手機版底選單的高度 */
    z-index: 9999;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    border: 1px solid #eeeeee;
    transition: all 0.3s ease; /* 預留給之後的轉場動畫 */
    font-family: sans-serif;
}

/* 狀態 A：縮小時 (is-collapsed) */
.float-status-container.is-collapsed {
    width: 283px !important;
    height: 65px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}
.float-status-container.is-collapsed .status-detail-card {
    display: none; /* 縮小時隱藏大卡片 */
}

/* 狀態 B：展開時 (is-expanded) */
.float-status-container.is-expanded {
    width: 270px;
    height: auto;
    max-width: calc(100vw - 30px); /* 確保它絕對不會超出螢幕，兩邊至少留 15px 的呼吸空間 */
    border-radius: 12px;
    padding: 20px;
}
.float-status-container.is-expanded .status-mini-bar {
    display: none; /* 展開時隱藏小條 */
}

/* 內部細節設計 */
.red {
    color: #FB5D52; 
    /* font-weight: bold;  */
}

.bigtxt{
    font-size: 22px;
    font-weight: bold;}

.status-mini-bar {
    display: flex;            /* 開啟 Flex 佈局讓 icon 與文字在同一行 */
    align-items: center;      /* 垂直方向置中對齊 */
    font-size: 13px;
    gap: 10px;                /* 增加元件間的水平間距 */
    color: #333;
    padding: 0 10px;
}


.detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.status-mini-bar .mini-icon, 
.cart-icon-circle {
    display: flex;            /* 使用 Flex 處理內部對齊 */
    align-items: center;      /* 垂直置中 */
    justify-content: center;  /* 水平置中 */
    border-radius: 50%;
    flex-shrink: 0;           /* 防止圓圈被文字擠壓變形 */
}

/* 分別指定尺寸與顏色 */
.status-mini-bar .mini-icon {
    width: 35px;
    height: 35px;
    background-color: #ffe7e6;
}

.cart-icon-circle {
    width: 45px;
    height: 45px;
    
    font-size: 20px;
}

/* --- 階段一專屬顏色 (灰底黑線) --- */
.status-level-1 .cart-icon-circle {
    background: #F0F0F0 !important; /* 灰底 */
}

.status-level-1 .cart-icon-circle i,
.status-level-1 .cart-icon-circle span,
.status-level-1 .cart-icon-circle svg {
    color: #000000 !important; /* 針對 iconfont 或 Google Icon 的黑線 */
    fill: #000000 !important;  /* 針對實心 SVG 的黑填色 */
    stroke: #000000 !important; /* 針對線條 SVG 的黑線條 */
}

/* 確保階段 2 & 3 維持原本的品牌紅底 */
.status-level-2 .cart-icon-circle,
.status-level-3 .cart-icon-circle {
    background: #ffe7e6;
}


/* 確保 iconfont 的行高不會干擾對齊 */
.iconfont {
    line-height: 1;
    display: inline-block;
}

.header-text p {
    margin: 0;
    line-height: 1.4;
}

.status-detail-card .header-text{
    white-space: nowrap;  /* 強制文字永遠保持在一行，不准折行 */
    overflow: hidden;     /* 在視窗還不夠寬時，先隱藏超出邊界的文字 */
    text-overflow: clip;  /* 確保文字邊緣乾淨俐落 */
    
    /* 原有的樣式保持不變 */
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #333;
}

.tip-text { font-size: 16px; font-weight: bold; }
.save-text { font-size: 13px; }

/* 進度條 */
.progress-section {
    margin: 15px 0;
}
.progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}
.progress-track {
    background: #f0f0f0;
    height: 6px;
    border-radius: 3px;
}
.progress-fill {
    background: #FB5D52;
    height: 100%;
    border-radius: 3px;
}

/* 按鈕 */
.btn-continue {
    /* --- 這次修改的排版重點 --- */
    display: block;        /* 讓排版區塊獨立，使 margin 推齊生效 */
    width: fit-content;    /* 寬度不再是 100%，而是自動貼合裡面的字數長度 */
    margin-left: auto;     /* 自動把左邊的空間填滿，把按鈕推到最右邊 */
    
    /* --- 原本的樣式與微調 --- */
    background: #000000;
    color: white;
    border: none;
    padding: 8px 20px;     /* 左右加一點 padding 讓按鈕不要太貼字，上下稍微縮小 */
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;       /* 字體從原本的 15px 微調到 14px，進一步降低顯眼度 */
    cursor: pointer;
    transition: all 0.2s ease; /* 讓變化平滑 */
}

/* 額外加碼：滑鼠游標移上去時稍微變透明，增加互動質感 */
.btn-continue:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.btn-continue:focus,
.btn-continue:active,
.btn-continue:focus-visible {
    outline: none !important;      /* 移除瀏覽器原生的外框線 */
    box-shadow: none !important;   /* 防止全域框架用陰影來假裝邊框 */
}

#cart-pop{
    display: none;
}

/* 1. 先設定 #go-top 的基礎位置與轉場 */
#go-top {
    position: fixed;
    right: 15px;
    bottom: 65px; /* 原本的位置 */
    z-index: 9998; /* 層級比提示視窗低一點點 */
    
    /* 這裡最重要：加上轉場動畫，移動時才會平滑 */
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    
}



@media (max-width: 960px) {
    

    #go-top{
        bottom: 158px;
    }

    .float-status-container.is-expanded ~ #go-top {
        bottom: 295px; /* 推高到提示視窗上方 */
    }
    
}
/* 針對 Google Icon 的樣式微調 */
.mini-icon .material-symbols-outlined {
    font-size: 28px;          /* 控制圖示大小，確保不會超出 35px 的圓圈 */
    
    /* Google Icon 專屬的微調參數 */
    font-variation-settings: 
        'FILL' 0,             /* 0=空心線條, 1=填滿實心 */
        'wght' 100;           /* 控制線條粗細，數字越大越粗 (預設是 400) */
}
.progress-bar-wrapper {
    display: flex;
    align-items: center;  /* 垂直置中 */
    gap: 10px;            /* 進度條與禮物之間的間距 */
    margin-top: 5px;
}
.progress-track {
    flex: 1;              /* 重要：這會讓條狀圖佔滿除了 Icon 以外的空間 */
    background: #f0f0f0;
    height: 8px;          /* 稍微加粗一點點增加質感 */
    border-radius: 4px;
    overflow: hidden;     /* 確保內部的 progress-fill 不會超出圓角 */
}

.progress-fill {
    background: #FB5D52;
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease; /* 增加長度變化的平滑感 */
}

.gift-icon {
    font-size: 22px;
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;
}


/* =========================================
   購物車進度三階段狀態管理
========================================= */

/* 1. 確保圓圈容器本身保持靜態，不執行跳動 */
.float-status-container.status-level-2 .cart-icon-circle,
.float-status-container.status-level-3 .cart-icon-circle {
    animation: none !important; /* 確保父容器不動 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. 將動畫套用到圓圈內的「Icon 本身」 */
/* 使用 > * 確保不管塞入 span, i 還是 svg，都能完美套用跳動動畫 */
.float-status-container.status-level-1 .cart-icon-circle > *,
.float-status-container.status-level-2 .cart-icon-circle > *,
.float-status-container.status-level-3 .cart-icon-circle > * {
    animation: logo-jump 0.5s ease infinite alternate;
}

/* 3. 微調跳動幅度：減少位移像素，讓它在圈圈內優雅彈跳而不穿幫 */
@keyframes logo-jump {
    from { 
        transform: translateY(0); 
    }
    to { 
        transform: translateY(-4px); /* 縮小位移至 4px，確保不跳出圓圈邊界 */
    }
}

/* 額外提醒：確保 Icon 是 block 或 inline-block，否則 transform 可能無效 */
.cart-icon-circle .material-symbols-outlined,
.cart-icon-circle .iconfont {
    display: inline-block;
}


@media screen and (max-width: 960px) {
    .float-status-container {
        /* 1. 關鍵：斷開頂部連結 */
        top: auto !important; 
        
        /* 2. 改從底部定位 (數值可依據手機版底選單高度微調) */
        bottom: calc(env(safe-area-inset-bottom) + 82px);
        
        /* 3. 保持右邊間距 */
        right: 15px; 
        
        /* 選配：如果是手機版，可以稍微縮小一點寬度避免太擠 */
        width: calc(100% - 30px); 
        max-width: 270px;
    }
}