/* === TaoTao 桃桃乐园：软呼呼云朵风格 (Soft Cloud Theme) === */

/* 1. 全局背景：粉色波点桌布 */
body {
    background-color: #FFF5F7 !important;
    background-image: radial-gradient(#FFC3A0 2px, transparent 2px) !important;
    background-size: 24px 24px !important;
}

/* 2. 套餐卡片：锯齿状优惠券 (Ticket Style) */
.plan-card {
    background: #FFF !important;
    border: none !important;
    /* 利用 mask 实现票券锯齿效果 */
    -webkit-mask-image: radial-gradient(circle at 0 50%, transparent 10px, black 11px), radial-gradient(circle at 100% 50%, transparent 10px, black 11px);
    mask-image: radial-gradient(circle at 0 50%, transparent 10px, black 11px), radial-gradient(circle at 100% 50%, transparent 10px, black 11px);
    -webkit-mask-position: -10px, 10px;
    mask-position: -10px, 10px;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    border-radius: 16px !important;
    padding: 24px 32px !important; /* 增加内边距避开缺口 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease !important;
    position: relative;
    margin-bottom: 12px !important;
}



/* 悬停 */
.plan-radio:not(:checked) + .plan-card:hover {
    transform: rotate(-1deg) scale(1.02);
    background: #FFFEFA !important;
}

/* 选中状态：变成粉色票券 */
.plan-radio:checked + .plan-card {
    background-image: linear-gradient(135deg, #FFF 0%, #FFF0F5 100%) !important;
    box-shadow: 0 8px 20px rgba(255, 154, 158, 0.3) !important;
    transform: scale(1.02);
}
.plan-radio:checked + .plan-card h3 {
    color: #FF9A9E !important;
}
.plan-card::before { display: none !important; } /* 去掉上一版的 Emoji */

/* 卡片内价格颜色 */
.plan-card .text-brand { color: #FF9A9E !important; }

/* === 3. SKU 图片选项：圆角矩形 (Squircle) === */
.sku-img-card {
    width: 130px !important;
    height: 140px !important;
    border-radius: 20px !important; /* Squircle */
    border: 4px solid #FFF !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important; /* 弹簧动画 */
    background: #FFF;
}
.sku-img-card img {
    border-radius: 16px !important;
}

/* 选中状态：旋转 + 边框 */
.sku-radio:checked + .sku-img-card {
    transform: rotate(6deg) scale(1.1) !important;
    border-color: #FF9A9E !important;
}

/* 图片下方文字 */
.sku-radio + .sku-img-card + span {
    font-size: 12px !important;
    color: #999 !important;
    margin-top: 6px !important;
    font-weight: bold !important;
}
.sku-radio:checked + .sku-img-card + span {
    color: #FF9A9E !important;
}

/* 4. SKU 纯文字选项：像小饼干 */
.sku-text-pill {
    background: #FFF !important;
    border: none !important;
    border-radius: 12px !important;
    color: #888 !important;
    box-shadow: 4px 4px 8px #ebd5d7, -4px -4px 8px #ffffff !important; /* 粘土阴影 */
    padding: 10px 18px !important;
    transition: all 0.2s !important;
}
.sku-radio:checked + .sku-text-pill {
    box-shadow: inset 2px 2px 5px #ebd5d7, inset -2px -2px 5px #ffffff !important; /* 按下效果 */
    color: #FF9A9E !important;
    background: #FFF5F7 !important;
    transform: translateY(2px);
}

/* === 5. 配送方式：大色块 === */
.delivery-card {
    background: #FFF !important;
    border: 2px solid transparent !important;
    border-radius: 24px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
    display: flex;
    align-items: center; /* 这一版改为横向布局或紧凑布局 */
    padding: 16px !important;
    transition: all 0.2s !important;
    gap: 12px !important;
}
/* 覆盖原本的 Flex-Col */
.delivery-card { flex-direction: row !important; justify-content: flex-start !important; }

/* 选中状态 */
.delivery-radio:checked + .delivery-card {
    border-color: #FF9A9E !important;
    background: #FFF0F5 !important;
}
.delivery-radio:checked + .delivery-card .icon {
    color: #FF9A9E !important;
    background: white;
    padding: 4px;
    border-radius: 50%;
}
.delivery-radio:checked + .delivery-card .label {
    color: #FF9A9E !important;
    font-weight: 900 !important;
}

/* 6. 输入框：内凹粘土风 (Neumorphism Inner) */
.clay-input {
    background: #fdfdfd !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 14px 20px !important;
    box-shadow: inset 3px 3px 6px #e6e6e6, inset -3px -3px 6px #ffffff !important;
    color: #7A5C58 !important;
    font-weight: bold !important;
    transition: all 0.2s !important;
}
.clay-input:focus {
    box-shadow: inset 4px 4px 8px #ebd5d7, inset -4px -4px 8px #ffffff !important; /* 粉色内阴影 */
    outline: none !important;
}
.clay-input::placeholder { color: #CCC !important; font-weight: normal; }

/* 隐藏滚动条 */
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* 修正商品列表中现省标签 */
.bg-red-50 {
    background: #FF9A9E !important;
    color: white !important;
    border-radius: 100px !important;
    font-size: 9px !important;
    padding: 2px 8px !important;
}
/* 修正推荐标签 */
.bg-brand {
    background-color: #FFC3A0 !important;
}
/* === TaoTao 甜點店風格：套餐與 SKU 樣式升級 === */

/* 1. 套餐卡片：蓬鬆福袋 (Puffy Bag) */
.plan-card {
    background: #FFF !important;
    border: 3px solid #FFF5F7 !important; /* 預設淡粉框 */
    border-radius: 24px !important;
    padding: 20px !important;
    position: relative;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* 彈跳效果 */
    box-shadow: 0 4px 0 #FFF0F5 !important; /* 底部厚度 */
    overflow: visible !important; /* 讓標籤可以凸出去 */
}

/* 懸停效果 */
.plan-radio:not(:checked) + .plan-card:hover {
    border-color: #FFC3A0 !important;
    transform: translateY(-2px);
}

/* 選中狀態：變成禮物盒 */
.plan-radio:checked + .plan-card {
    background: #FFF !important;
    border-color: #FF9A9E !important;
    box-shadow: 0 0 0 2px #FF9A9E, 0 8px 20px -5px rgba(255, 154, 158, 0.4) !important;
    transform: scale(1.02);
    z-index: 10;
}

/* 選中時的小裝飾：右上角的蝴蝶結 */
.plan-radio:checked + .plan-card::before {
    content: '🎀' !important;
    position: absolute;
    top: -12px;
    right: -6px;
    font-size: 24px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
    animation: bounce 1s infinite;
}

/* 讓原本的 mask 效果失效，改用圓角 */
.plan-card { -webkit-mask-image: none !important; mask-image: none !important; }

/* 2. SKU 圖片：甜甜圈 (Donut Style) */
.sku-img-card {
    width: 130px !important;
    height: 140px !important;
    border-radius: 50% !important; /* 圓形 */
    border: 4px solid #FFF !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    padding: 2px !important;
    background: #FFF !important;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}
.sku-img-card img {
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* 選中狀態：旋轉 + 粉色光圈 */
.sku-radio:checked + .sku-img-card {
    border-color: #FF9A9E !important;
    box-shadow: 0 0 0 4px #FFF0F5 !important; /* 雙層邊框 */
    transform: rotate(12deg) scale(1.1) !important;
}

/* 圖片下方的文字 */
.sku-radio + .sku-img-card + span {
    font-size: 11px !important;
    font-weight: bold !important;
    color: #AAA !important;
    margin-top: 6px !important;
    background: #FFF;
    padding: 2px 8px;
    border-radius: 10px;
}
.sku-radio:checked + .sku-img-card + span {
    color: #FF9A9E !important;
    background: #FFF0F5 !important;
}

/* 3. SKU 純文字：馬卡龍 (Macaron Style) */
.sku-text-pill {
    background: #FFF !important;
    border: 2px solid #F0F0F0 !important;
    border-radius: 99px !important; /* 膠囊狀 */
    color: #888 !important;
    padding: 10px 20px !important;
    font-weight: bold !important;
    box-shadow: 0 4px 0 #E0E0E0 !important; /* 3D 立體底座 */
    transition: all 0.1s !important;
    margin-bottom: 4px !important; /* 給陰影留空間 */
}

/* 選中狀態：壓下去變粉色 */
.sku-radio:checked + .sku-text-pill {
    background: linear-gradient(135deg, #FFC3A0 0%, #FF9A9E 100%) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 2px 0 #E58E8E !important; /* 壓扁的陰影 */
    transform: translateY(2px);
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

/* 4. 折扣標籤 (省$XXX) */
.text-white.bg-red-400 {
    background-color: #FF9A9E !important;
    border-radius: 4px 12px 4px 12px !important; /* 葉子形狀 */
    padding: 2px 6px !important;
    font-weight: 900 !important;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.05);
}

/* 5. 店長推薦標籤 */
.bg-pop-yellow {
    background: #FFD700 !important;
    color: #8B4513 !important;
    border-radius: 0 20px 0 20px !important;
    box-shadow: -2px 2px 5px rgba(0,0,0,0.1);
    font-size: 11px !important;
}
/* === SKU 圖片：方方小餅乾 (Cookie Style) === */
.sku-img-card {
    width: 130px !important;  /*稍微加大一點點，方形視覺上比較大 */
    height: 140px !important;
    border-radius: 20px !important; /* 修改點：從 50% 改為 20px (圓角正方形) */
    border: 4px solid #FFF !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    padding: 0 !important; /* 移除內距，讓圖片滿版 */
    background: #FFF !important;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
    overflow: hidden !important; /* 確保圖片不超出圓角 */
}

/* 圖片本身 */
.sku-img-card img {
    border-radius: 16px !important; /* 修改點：配合外框的圓角 */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 選中狀態：輕微旋轉 + 粉色框 */
.sku-radio:checked + .sku-img-card {
    border-color: #FF9A9E !important;
    box-shadow: 0 0 0 4px #FFF0F5 !important;
    transform: rotate(6deg) scale(1.05) !important; /* 稍微轉一點點就好 */
}

/* 圖片下方的文字 (保持原樣，微調間距) */
.sku-radio + .sku-img-card + span {
    display: block;
    font-size: 11px !important;
    font-weight: bold !important;
    color: #AAA !important;
    margin-top: 8px !important; /* 增加一點距離 */
    background: transparent;    /* 去掉背景色，讓它看起來更乾淨 */
    padding: 0;
    border-radius: 0;
}
.sku-radio:checked + .sku-img-card + span {
    color: #FF9A9E !important;
    background: transparent !important;
}
/* 添加在 styles.css 中 */

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* 確保按鈕有蜜桃漸層 */
.bg-peach-gradient {
    background: linear-gradient(135deg, #FFC3A0 0%, #FF9A9E 100%);
}

/* 價格數字的字體優化 */
#footer-total-price {
    font-variant-numeric: tabular-nums; /* 防止數字變動時寬度跳動 */
    letter-spacing: -0.5px;
}

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

/* 根据内容长度自适应 */
#success-modal .pt-16.pb-8.px-6 {
    /* 默认状态 */
    max-height: none;
}

/* 当内容过多时，启用滚动（通过媒体查询或自定义类） */
@media (max-height: 700px) {
    #success-modal .bg-white {
        max-height: 95vh;
    }

    #success-modal .pt-16.pb-8.px-6 {
        max-height: calc(90vh - 100px);
        overflow-y: auto;
        padding-right: 8px; /* 为滚动条留出空间 */
    }

    #success-modal .bg-tao-bg\\/50 {
    max-height: 250px;
    overflow-y: auto;
}
}

/* 或者通过JavaScript动态添加类 */
.modal-content-scrollable .pt-16.pb-8.px-6 {
    max-height: 60vh;
    overflow-y: auto;
}

.modal-content-scrollable .bg-tao-bg\\/50 {
    max-height: 200px;
    overflow-y: auto;
}