/* === Smart Composite Bundle Front-End === */
.scb-composite-wrap{font-family:inherit;margin:20px 0}
.scb-above{margin-bottom:16px;font-size:14px;color:#444;line-height:1.6}

/* Component wrapper */
.scb-component{border:1px solid #ddd;border-radius:6px;margin-bottom:16px;overflow:hidden;background:#fff}

/* Header */
.scb-comp-header{background:#f6f6f6;padding:11px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid #e5e5e5}
.scb-comp-title{font-weight:700;font-size:15px;flex:1;color:#1a1a1a}
.scb-comp-rule{font-size:12px;color:#777}

/* Badge */
.scb-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;background:#fff3cd;color:#856404;border:1px solid #e9c46a;transition:background .25s,color .25s,border-color .25s;white-space:nowrap}
.scb-badge.done{background:#d1e7dd;color:#0a3622;border-color:#a3cfbb}

/* Progress */
.scb-progress-bar{height:4px;background:#e9ecef}
.scb-progress-fill{height:4px;background:#2e7d32;transition:width .3s ease;border-radius:0 2px 2px 0}

/* ---- Thumbnail Grid (default) ---- */
.scb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;padding:14px}
.scb-card{border:1.5px solid #ddd;border-radius:6px;padding:10px;cursor:pointer;position:relative;transition:border-color .15s,background .15s;text-align:center;background:#fff;user-select:none}
.scb-card:hover{border-color:#bbb}
.scb-card.selected{border-color:#2e7d32;background:#f0f9f1}
.scb-card.disabled{opacity:.4;pointer-events:none}
.scb-card .scb-chk{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:#2e7d32;color:#fff;font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center;line-height:1}
.scb-card.selected .scb-chk{display:flex}
.scb-card-img img{width:100%;border-radius:4px;aspect-ratio:1;object-fit:cover}
.scb-card-name{font-size:12px;font-weight:500;margin-top:6px;line-height:1.3;color:#222}
.scb-card-price{font-size:12px;color:#888;margin-top:3px; display:none;}

/* ---- List ---- */
.scb-list{padding:10px 14px}
.scb-list-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid #eee;border-radius:4px;margin-bottom:6px;cursor:pointer;position:relative;transition:border-color .15s,background .15s;user-select:none}
.scb-list-row:hover{border-color:#bbb}
.scb-list-row.selected{border-color:#2e7d32;background:#f0f9f1}
.scb-list-row.disabled{opacity:.4;pointer-events:none}
.scb-list-row .scb-chk{width:20px;height:20px;border-radius:50%;background:#2e7d32;color:#fff;font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center;flex-shrink:0}
.scb-list-row.selected .scb-chk{display:flex}
.scb-list-img{flex-shrink:0}.scb-list-img img{width:40px;height:40px;object-fit:cover;border-radius:4px;display:block}
.scb-list-name{flex:1;font-size:13px;color:#222}
.scb-list-price{font-size:13px;color:#888}

/* ---- Dropdown ---- */
.scb-dropdown-wrap{padding:14px}
.scb-dropdown{width:100%;padding:8px 10px;border:1px solid #ddd;border-radius:4px;font-size:14px;color:#222}

/* ---- Radio ---- */
.scb-radio-list{padding:10px 14px;display:flex;flex-direction:column;gap:8px}
.scb-radio-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid #eee;border-radius:4px;cursor:pointer;font-size:13px;transition:border-color .15s,background .15s}
.scb-radio-item:hover{border-color:#bbb}
.scb-radio-item input[type=radio]{margin:0;flex-shrink:0}
.scb-radio-img img{width:40px;height:40px;object-fit:cover;border-radius:4px;display:block}
.scb-radio-name{flex:1;color:#222}
.scb-radio-price{color:#888;font-size:12px}

/* Selected names label */
.scb-sel-label{font-size:12px;color:#2e7d32;padding:0 14px 10px;line-height:1.5;min-height:16px}

/* Summary bar */
.scb-summary{background:#f7f7f7; width:100%; border:1px solid #ddd;border-radius:6px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:6px}
.scb-summary-counts{display:flex;gap:14px;flex-wrap:wrap}
.scb-sum-piece{font-size:13px;color:#555}
.scb-sum-piece strong{color:#1a1a1a}
.scb-summary-right{display:flex;align-items:center;gap:14px}
.scb-total-wrap{font-size:14px;color:#555}
.scb-total-price{font-size:16px;font-weight:700;color:#1a1a1a}
.scb-atc-btn{padding:10px 28px!important;font-size:15px!important;cursor:pointer}
.scb-atc-btn:disabled{opacity:.5!important;cursor:not-allowed!important;pointer-events:auto!important}
.scb-no-comp{color:#e2401c;border:1px solid #e2401c;padding:12px;border-radius:4px;font-size:14px}

@media(max-width:600px){
    .scb-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
    .scb-summary{flex-direction:column;align-items:stretch}
    .scb-summary-right{justify-content:space-between}
}