/* 基礎設定 */
html { scroll-behavior: smooth; }
body {
    background-color: #F7F7F7;
    color: #333;
    -webkit-font-smoothing: antialiased;
}

/* 隱藏滾動條 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* === 爆款套餐卡片 (強調性價比) === */
.plan-card {
    background: #FFFFFF;
    border: 2px solid #E5E5E5;
    border-radius: 0.75rem; /* 12px */
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

/* 推薦標籤 (Best Value) */
.plan-card[data-recommend="true"]::before {
    content: '店長推薦';
    position: absolute;
    top: -10px; left: 10px;
    background: #FF2D2D;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(255, 45, 45, 0.4);
    z-index: 20;
}

/* 選中狀態 */
.plan-radio:checked + .plan-card {
    border-color: #FF7300;
    background-color: #FFF7ED; /* 淺橙色背景 */
    box-shadow: 0 0 0 1px #FF7300, 0 4px 12px rgba(255, 115, 0, 0.2);
    z-index: 10;
}

/* 價格變色 */
.plan-radio:checked + .plan-card .price-tag {
    color: #FF2D2D;
}
.plan-radio:checked + .plan-card .check-icon {
    background-color: #FF7300;
    border-color: #FF7300;
    color: white;
}

/* === SKU 樣式 (方塊按鈕) === */
.sku-radio:checked + div {
    background-color: #FF7300;
    color: #fff;
    border-color: #FF7300;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(255, 115, 0, 0.3);
}

.sku-radio:checked + div.sku-img-card {
    border-color: #FF7300;
    box-shadow: 0 0 0 2px #FF7300;
}
.sku-radio:checked + div span.sku-label {
    background-color: #FF7300;
}

/* === 配送方式 (大按鈕) === */
input[name="delivery"]:checked + div {
    background-color: #FFF7ED;
    color: #FF7300;
    border-color: #FF7300;
    font-weight: bold;
    box-shadow: inset 0 0 0 1px #FF7300;
}

/* === 動畫效果 === */
@keyframes shimmer {
    0% { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(200%) skewX(-15deg); }
}
.group-hover\:animate-shimmer:hover {
    animation: shimmer 1s infinite;
}

img { -webkit-user-drag: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border-width: 0; }
@keyframes shimmer-bg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-shimmer-bg {
    animation: shimmer-bg 3s ease infinite;
}
@keyframes shine {
        100% { left: 125%; }
    }
    .group-hover\:animate-shine:hover {
        animation: shine 0.5s;
    }

    /* 箭頭橫向跳動 */
    @keyframes bounce-horizontal {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(25%); }
    }
    .animate-bounce-horizontal {
        animation: bounce-horizontal 1s infinite;
    }


.detail-img img{
    width: 100% !important;
}

#success-modal > div {
    max-height: 90vh;
    overflow-y: auto;
}