/**
 * ALIBARBAR Pack Builder Styles
 * 
 * Obsidian Black #0B0B0A
 * Champagne Gold #C9A45C
 * Warm Ivory #F5F1E8
 * 
 * @version 0.2.0
 */

/* === PACK BUILDER CONTAINER === */
.ab-pack-builder {
    margin: 32px 0;
    padding: 24px;
    background: #0B0B0A;
    color: #F5F1E8;
    border-radius: 8px;
}

.ab-pack-builder[data-ab-capacity="3"] {
    /* 3 Pack specific styles if needed */
}

.ab-pack-builder[data-ab-capacity="5"] {
    /* 5 Pack specific styles if needed */
}

.ab-pack-builder[data-ab-capacity="10"] {
    /* 10 Pack specific styles if needed */
}

.ab-pack-builder[data-ab-capacity="20"] {
    /* 20 Pack specific styles if needed */
}

/* === HEADER === */
.ab-pack-builder__header {
    text-align: center;
    margin-bottom: 24px;
}

.ab-pack-builder__eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #C9A45C;
    margin-bottom: 8px;
}

.ab-pack-builder__header h2 {
    font-size: 28px;
    font-weight: 700;
    color: #F5F1E8;
    margin: 0 0 12px 0;
}

.ab-pack-builder__header p {
    font-size: 14px;
    color: rgba(245, 241, 232, 0.7);
    margin: 0;
    line-height: 1.6;
}

/* === STATUS BAR === */
.ab-pack-builder__status {
    text-align: center;
    padding: 12px;
    margin-bottom: 24px;
    background: rgba(201, 164, 92, 0.1);
    border: 1px solid rgba(201, 164, 92, 0.3);
    border-radius: 4px;
}

.ab-pack-builder__status strong {
    font-size: 20px;
    color: #C9A45C;
}

.ab-pack-builder__status span:last-child {
    font-size: 14px;
    color: rgba(245, 241, 232, 0.7);
    margin-left: 6px;
}

/* Complete state */
.ab-pack-builder.is-complete .ab-pack-builder__status {
    background: rgba(201, 164, 92, 0.2);
    border-color: #C9A45C;
}

/* === FLAVOUR GRID === */
.ab-pack-builder__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* === FLAVOUR TILE === */
.ab-pack-flavour {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    transition: all 0.2s ease;
}

.ab-pack-flavour:hover {
    background: rgba(255, 255, 255, 0.08);
}

.ab-pack-flavour.is-selected {
    border-color: #C9A45C;
    background: rgba(201, 164, 92, 0.1);
    box-shadow: 0 0 12px rgba(201, 164, 92, 0.3);
}

/* === FLAVOUR IMAGE === */
.ab-pack-flavour__image {
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
}

.ab-pack-flavour__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
}

/* === FLAVOUR BODY === */
.ab-pack-flavour__body {
    margin-top: 8px;
}

.ab-pack-flavour__body h3 {
    font-size: 14px;
    font-weight: 600;
    color: #F5F1E8;
    margin: 0 0 8px 0;
    line-height: 1.3;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === STEPPER === */
.ab-pack-flavour__stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ab-pack-flavour__minus,
.ab-pack-flavour__plus {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(201, 164, 92, 0.5);
    background: transparent;
    color: #C9A45C;
    font-size: 18px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ab-pack-flavour__minus:hover,
.ab-pack-flavour__plus:hover {
    background: rgba(201, 164, 92, 0.2);
    border-color: #C9A45C;
}

.ab-pack-flavour__minus:disabled,
.ab-pack-flavour__plus:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.ab-pack-flavour__qty {
    font-size: 16px;
    font-weight: 700;
    color: #F5F1E8;
    min-width: 24px;
    text-align: center;
}

/* === RESPONSIVE === */

/* Tablet 1024px */
@media (max-width: 1024px) {
    .ab-pack-builder__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet 768px */
@media (max-width: 768px) {
    .ab-pack-builder__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .ab-pack-builder__header h2 {
        font-size: 24px;
    }
}

/* Mobile 430px */
@media (max-width: 430px) {
    .ab-pack-builder {
        padding: 16px;
    }
    
    .ab-pack-builder__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .ab-pack-flavour {
        padding: 0;
    }
    
    .ab-pack-flavour__image {
        max-height: 82px;
    }
    
    .ab-pack-flavour__body h3 {
        font-size: 13px;
        min-height: auto;
    }
    
    .ab-pack-flavour__minus,
    .ab-pack-flavour__plus {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .ab-pack-flavour__qty {
        font-size: 15px;
    }
}

/* Mobile 390px */
@media (max-width: 390px) {
    .ab-pack-builder__grid {
        gap: 10px;
    }
    
    .ab-pack-flavour__image {
        max-height: 72px;
    }
    
    .ab-pack-flavour__body h3 {
        font-size: 12px;
    }
}

/* Mobile 375px */
@media (max-width: 375px) {
    .ab-pack-flavour__image {
        max-height: 68px;
    }
}

/* Mobile 360px */
@media (max-width: 360px) {
    .ab-pack-builder__grid {
        gap: 8px;
    }
    
    .ab-pack-flavour {
        padding: 6px;
    }
    
    .ab-pack-flavour__image {
        max-height: 64px;
    }
}

/* === FORBIDDEN COLOR CHECK === */
/* #d7ff32 must NOT appear in this file */

/* PHASE 4A-FIX-1: Prevent Builder grid overflow */
.ab-pack-builder__grid {
    max-width: 100%;
    box-sizing: border-box;
}

.ab-pack-flavour {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* PHASE 4C-FIX-8: 修复手机端口味卡片 stepper 边框截断 */
/* 根因：.ab-pack-flavour 原设 overflow:hidden 会裁剪 stepper 边框 */
.ab-pack-flavour {
    overflow: visible !important;
}

/* stepper 容器保护 */
.ab-pack-flavour__stepper {
    overflow: visible !important;
}

/* 加减按钮：边框实色更清晰 + 防止裁剪 */
.ab-pack-flavour__minus,
.ab-pack-flavour__plus {
    border: 1px solid #C9A45C !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

/* 手机端 430px 以下增强保护 */
@media (max-width: 430px) {
    .ab-pack-flavour {
        overflow: hidden !important;
    }
    
    .ab-pack-flavour__stepper {
        overflow: visible !important;
        gap: 6px;
        max-width: 100%;
    }
    
    .ab-pack-flavour__minus,
    .ab-pack-flavour__plus {
        width: 32px !important;
        height: 32px !important;
        border: 1px solid #C9A45C !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }
    
    .ab-pack-flavour__qty {
        min-width: 20px;
    }
}

/* ===== PHASE 4C-FIX-9: 恢复 overflow:hidden 防卡片挤出屏幕 ===== */
/* 恢复卡片 overflow（防挤出屏幕）*/
.ab-pack-flavour {
    overflow: hidden !important;
}

/* 图片防溢出（双保险）*/
.ab-pack-flavour__image img {
    max-width: 100% !important;
    height: auto !important;
}

/* 保留实色边框（FIX-8 已生效）*/
.ab-pack-flavour__minus,
.ab-pack-flavour__plus {
    border: 1px solid #C9A45C !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

/* 手机端 430px 以下微调 */
@media (max-width: 430px) {
    .ab-pack-flavour__minus,
    .ab-pack-flavour__plus {
        width: 36px !important;
        height: 36px !important;
    }
}

/* ===== PHASE 4C-FIX-10: 精确修复 stepper 边框（不裁剪）+ 防卡片溢出 ===== */
/* 卡片保持 hidden（防内容溢出屏幕）*/
.ab-pack-flavour {
    overflow: hidden !important;
}

/* stepper 容器设为 visible（只让 stepper 不被裁剪）*/
.ab-pack-flavour__stepper {
    overflow: visible !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 1px; /* 给边框留空间，防止被卡片裁剪 */
}

/* 按钮：实色边框 + box-sizing: border-box + 尺寸足够 */
.ab-pack-flavour__minus,
.ab-pack-flavour__plus {
    width: 34px !important;
    height: 34px !important;
    border: 1px solid #C9A45C !important;
    background: transparent;
    color: #C9A45C;
    font-size: 18px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

/* 手机端 430px 以下微调 */
@media (max-width: 430px) {
    .ab-pack-flavour__stepper {
        gap: 6px;
        padding: 2px;
    }
    
    .ab-pack-flavour__minus,
    .ab-pack-flavour__plus {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ===== PHASE 4C-FIX-11: 用 outline 替代 border（不会被 overflow:hidden 裁剪）===== */
.ab-pack-flavour {
    overflow: hidden !important;
}

.ab-pack-flavour__stepper {
    overflow: visible !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 关键：用 outline 替代 border（outline 不占空间，不会被裁剪）*/
.ab-pack-flavour__minus,
.ab-pack-flavour__plus {
    width: 34px !important;
    height: 34px !important;
    outline: 1px solid #C9A45C !important;  /* outline 替代 border */
    outline-offset: -1px;  /* 让 outline 在内部显示（模拟 border）*/
    background: transparent;
    color: #C9A45C;
    font-size: 18px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    border: none !important;  /* 清除 border，只用 outline */
}

/* 手机端微调 */
@media (max-width: 430px) {
    .ab-pack-flavour__stepper {
        gap: 6px;
    }
    
    .ab-pack-flavour__minus,
    .ab-pack-flavour__plus {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ===== PHASE 4C-FIX-12: 彻底移除卡片级 overflow 裁剪 ===== */
/* 卡片 overflow: visible（不再裁剪任何内容）*/
.ab-pack-flavour {
    overflow: visible !important;
}

/* 只让图片容器裁剪图片（原职责）*/
.ab-pack-flavour__image {
    overflow: hidden !important;
}

/* stepper 容器：visible + padding 防贴边 */
.ab-pack-flavour__stepper {
    overflow: visible !important;
    padding: 2px !important;
}

/* 按钮：用 border（清除 outline）*/
.ab-pack-flavour__minus,
.ab-pack-flavour__plus {
    border: 1px solid #C9A45C !important;
    outline: none !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

/* ===== PHASE 4C-FIX-13: 加粗边框 + 实色背景（彻底解决不完整）===== */
.ab-pack-flavour {
    overflow: visible !important;
}

.ab-pack-flavour__image {
    overflow: hidden !important;
}

.ab-pack-flavour__stepper {
    overflow: visible !important;
    padding: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.ab-pack-flavour__minus,
.ab-pack-flavour__plus {
    /* 加粗边框 + 实色背景 */
    border: 2px solid #C9A45C !important;
    background: #2A2A2A !important;
    color: #C9A45C !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    outline: none !important;
    user-select: none !important;
}

/* 手机端 430px 以下微调 */
@media (max-width: 430px) {
    .ab-pack-flavour__stepper {
        gap: 6px !important;
    }
    
    .ab-pack-flavour__minus,
    .ab-pack-flavour__plus {
        width: 34px !important;
        height: 34px !important;
        border-width: 2px !important;
    }
}

/* ===== PHASE 4C-FIX-15: 恢复 overflow:hidden + inset box-shadow 模拟边框 ===== */
/* 终极方案：卡片恢复 hidden（图片不溢出屏幕）+ 按钮用 inset shadow（边框不被裁剪）*/

/* ① 卡片恢复 overflow:hidden → 图片不再挤出屏幕 */
.ab-pack-flavour {
    overflow: hidden !important;
}

/* ② 图片容器也保持 hidden（双保险）*/
.ab-pack-flavour__image {
    overflow: hidden !important;
}

/* ③ stepper 容器 */
.ab-pack-flavour__stepper {
    overflow: visible !important;
    max-width: 100% !important;
}

/* ④ 按钮：inset box-shadow 模拟边框（不被 overflow 裁剪，且不占布局空间）*/
.ab-pack-flavour__minus,
.ab-pack-flavour__plus {
    border: none !important;
    outline: none !important;
    box-shadow: inset 0 0 0 2px #C9A45C !important;
    background: #2A2A2A !important;
    color: #C9A45C !important;
    border-radius: 4px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    user-select: none !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ⑤ 移动端微调 */
@media (max-width: 430px) {
    .ab-pack-flavour__minus,
    .ab-pack-flavour__plus {
        width: 34px !important;
        height: 34px !important;
        box-shadow: inset 0 0 0 2px #C9A45C !important;
    }
}