/* ================================================================
   WC Bundle Builder – front.css v7
   Fix 1: Colour/Size disabled state → styled placeholder (not dash)
   Fix 2: Qty +/- horizontal layout
   Fix 4: Hide individual product prices from summary
   Fix 5: Full mobile responsive
   ================================================================ */
*,*::before,*::after{box-sizing:border-box;}

.wcbb-wrap{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    max-width:1200px; margin:0 auto; padding-bottom:120px; color:#1a1a1a;
}

/* ── STEP BLOCK ──────────────────────────────────────────────── */
.wcbb-step{
    background:#fff; border:1px solid #e2e2e2; border-radius:10px;
    margin-bottom:20px; overflow:visible;
    box-shadow:0 1px 6px rgba(0,0,0,.06);
}
.wcbb-step-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px; background:#f9f9f9;
    border-bottom:1px solid #e2e2e2; border-radius:10px 10px 0 0;
}
.wcbb-step-header h2{margin:0;font-size:1.05rem;font-weight:700;color:#111;}
.wcbb-step-progress{
    background:#474f52; color:white; font-weight:700;
    font-size:.88rem; padding:5px 16px; border-radius:20px;
    min-width:52px; text-align:center; transition:background .2s,color .2s;
    white-space:nowrap;
}
.wcbb-step-progress.complete{background:#d1fae5;color:#065f46;}
.wcbb-step-body{padding:0 24px 18px;}

/* ── COL HEADERS ─────────────────────────────────────────────── */
.wcbb-col-headers{
    display:grid;
    grid-template-columns: 64px 1fr 200px 130px 130px 130px;
    column-gap:10px;
    padding:13px 0 7px;
    border-bottom:1px solid #efefef;
    font-size:.68rem; font-weight:700; color:#9ca3af;
    text-transform:uppercase; letter-spacing:.06em;
}
.wcbb-col-headers .h-qty{text-align:center;}

/* ── ROW GROUP ───────────────────────────────────────────────── */
.wcbb-row-group{border-bottom:1px solid #f3f4f6; transition:opacity .25s;}
.wcbb-row-group:last-child{border-bottom:none;}

/* Locked: grey out but keep colour + size always interactive */
.wcbb-row-group.wcbb-locked{opacity:.38;}
.wcbb-row-group.wcbb-locked .wcbb-thumb,
.wcbb-row-group.wcbb-locked .wcbb-col-product,
.wcbb-row-group.wcbb-locked .wcbb-col-qty,
.wcbb-row-group.wcbb-locked .wcbb-col-action{
    pointer-events:none;
}
/* Colour + Size always clickable — never locked */
.wcbb-row-group.wcbb-locked .wcbb-col-colour,
.wcbb-row-group.wcbb-locked .wcbb-col-size{
    pointer-events:auto !important;
    opacity:1 !important;
}

/* ── MAIN ROW ────────────────────────────────────────────────── */
.wcbb-main-row{
    display:grid;
    grid-template-columns: 64px 1fr 200px 130px 130px 130px;
    column-gap:10px;
    align-items:center;
    padding:10px 0;
}

/* ── THUMBNAIL ───────────────────────────────────────────────── */
.wcbb-thumb{
    width:56px; height:56px; border-radius:6px;
    overflow:hidden; border:1px solid #e5e7eb; background:#f5f5f5;
}
.wcbb-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

/* ── PRODUCT SELECT ──────────────────────────────────────────── */
.wcbb-product-select{
    width:100%; padding:9px 30px 9px 10px;
    border:1px solid #d1d5db; border-radius:6px;
    font-size:.85rem; color:#374151; background-color:#fff;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7z' fill='%236b7280'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 10px center;
    appearance:none; -webkit-appearance:none; cursor:pointer;
    transition:border-color .2s,box-shadow .2s;
}
.wcbb-product-select:focus{
    outline:none; border-color:#3b82f6;
    box-shadow:0 0 0 3px rgba(59,130,246,.15);
}

/* ── COLOUR CUSTOM DROPDOWN (dot + text) ─────────────────────── */
.wcbb-colour-trigger,.wcbb-swatch-picker{display:none!important;} /* legacy */
.wcbb-colour-select{display:none!important;} /* hidden — value kept for cart */

/* Colour cell */
.wcbb-col-colour{
    position:relative; display:flex;
    align-items:center; min-width:0;
}
.wcbb-colour-wrap{ width:100%; position:relative; }

/* Custom dropdown container */
.wcbb-custom-colour-dd{
    position:relative; width:100%;
}

/* Trigger button */
.wcbb-colour-trigger-btn{
    display:flex; align-items:center; gap:7px;
    width:100%; padding:9px 10px;
    border:1px solid #e5e7eb; border-radius:6px;
    background:#f9fafb; cursor:pointer;
    font-size:.85rem; color:#374151;
    text-align:left; transition:border-color .2s, box-shadow .2s;
}
/* Active (has colours loaded) */
.wcbb-custom-colour-dd:not(.wcbb-cdd-placeholder) .wcbb-colour-trigger-btn{
    background:#fff; border-color:#d1d5db; cursor:pointer;
}
.wcbb-custom-colour-dd:not(.wcbb-cdd-placeholder) .wcbb-colour-trigger-btn:hover{
    border-color:#9ca3af;
}
.wcbb-custom-colour-dd.is-open .wcbb-colour-trigger-btn{
    border-color:#3b82f6;
    box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
/* Placeholder state — looks like Size placeholder */
.wcbb-cdd-placeholder .wcbb-colour-trigger-btn{
    background:#f9fafb; border-color:#e5e7eb; cursor:default; pointer-events:none;
}
.wcbb-cdd-label{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wcbb-cdd-arrow{ font-size:.6rem; color:#6b7280; margin-left:2px; }

/* Colour dot (in trigger + list) */
.wcbb-cdd-dot{
    width:18px; height:18px; border-radius:50%; flex-shrink:0;
    border:1.5px solid rgba(0,0,0,.15);
    display:inline-block;
}

/* Dropdown list */
.wcbb-cdd-list{
    position:absolute; top:calc(100% + 4px); left:0; right:0;
    background:#fff; border:1px solid #d1d5db; border-radius:6px;
    box-shadow:0 6px 20px rgba(0,0,0,.12);
    z-index:9999; margin:0; padding:4px 0; list-style:none;
    max-height:220px; overflow-y:auto;
}
.wcbb-cdd-item{
    display:flex; align-items:center; gap:8px;
    padding:7px 12px; cursor:pointer; font-size:.85rem; color:#374151;
    transition:background .12s;
}
.wcbb-cdd-item:hover{ background:#f3f4f6; }
.wcbb-cdd-item.is-selected{ background:#eff6ff; font-weight:600; }

/* ── FIX 1: SIZE CELL ────────────────────────────────────────── */
.wcbb-col-size{display:flex; align-items:center; min-width:0;}

/* Placeholder for colour/size cell before product selected */
.wcbb-var-placeholder{
    display:inline-flex; align-items:center;
    padding:7px 10px;
    border:1px solid #e5e7eb; border-radius:6px;
    background:#f9fafb; color:#c4c9d2;
    font-size:.82rem; font-style:italic;
    white-space:nowrap; width:100%;
    user-select:none; cursor:default;
}

/* Active size select */
.wcbb-size-select{
    width:100%; padding:9px 28px 9px 10px;
    border:1px solid #d1d5db; border-radius:6px;
    font-size:.85rem; color:#374151; background-color:#fff;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7z' fill='%236b7280'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 8px center;
    appearance:none; -webkit-appearance:none; cursor:pointer;
    transition:border-color .2s, box-shadow .2s;
}
.wcbb-size-select:focus{
    outline:none; border-color:#3b82f6;
    box-shadow:0 0 0 3px rgba(59,130,246,.15);
}

/* ── FIX 2: QUANTITY — HORIZONTAL +  [0]  − ─────────────────── */
.wcbb-col-qty{display:flex; justify-content:center; align-items:center;}

.wcbb-qty-ctrl{
    display:flex;
    flex-direction:row;   /* ← horizontal */
    align-items:center;
    gap:4px;
}

.wcbb-qty-btn{
    display:flex; align-items:center; justify-content:center;
    width:32px; height:36px;
    background:#f0f0f0; border:1px solid #d1d5db; border-radius:6px;
    cursor:pointer; color:#374151;
    font-size:1.15rem; font-weight:700; line-height:1;
    transition:background .15s, color .15s, border-color .15s;
    flex-shrink:0; user-select:none;
}
.wcbb-qty-btn:hover:not(:disabled){
    background:#dbeafe; color:#1d4ed8; border-color:#93c5fd;
}
.wcbb-qty-btn:disabled{opacity:.28; cursor:not-allowed; background:#f9fafb;}

.wcbb-qty{
    width:50px; height:36px; text-align:center;
    border:1px solid #d1d5db; border-radius:6px;
    font-size:1rem; font-weight:700; color:#111; background:#fff;
    -moz-appearance:textfield;
}
.wcbb-qty::-webkit-inner-spin-button,
.wcbb-qty::-webkit-outer-spin-button{-webkit-appearance:none; margin:0;}

/* ── REMOVE BUTTON ───────────────────────────────────────────── */
.wcbb-col-action{display:flex; align-items:center; justify-content:flex-end;}
.wcbb-remove-row{
    display:inline-flex; align-items:center; gap:5px;
    background:#fff; border:1px solid #fca5a5; color:#dc2626;
    border-radius:6px; padding:8px 13px;
    font-size:.76rem; font-weight:700; letter-spacing:.03em;
    cursor:pointer; white-space:nowrap;
    transition:background .2s, border-color .2s;
}
.wcbb-remove-row:hover{background:#fef2f2; border-color:#f87171;}

/* ── ADD ROW BUTTON ──────────────────────────────────────────── */
.wcbb-step-add-wrap{display:flex; align-items:center; gap:12px; padding:13px 0 3px;}
.wcbb-add-row{
    display:inline-flex; align-items:center; gap:6px;
    background:transparent; border:2px dashed #3b82f6; color:#1d4ed8;
    border-radius:7px; padding:8px 18px;
    font-size:.83rem; font-weight:700; cursor:pointer;
    transition:background .2s, border-color .2s;
}
.wcbb-add-row:hover:not(:disabled){background:#eff6ff; border-color:#2563eb;}
.wcbb-add-row:disabled{border-color:#d1d5db; color:#9ca3af; cursor:not-allowed;}
.wcbb-limit-note{font-size:.78rem; color:#9ca3af;}

/* ── ORDER SUMMARY ───────────────────────────────────────────── */
.wcbb-summary{
    display:flex; align-items:flex-start; gap:24px; flex-wrap:wrap;
    background:#fff; border:1px solid #e2e2e2; border-radius:10px;
    padding:24px; margin-top:10px; box-shadow:0 1px 6px rgba(0,0,0,.06);
}
.wcbb-summary-left{flex:1; min-width:220px;}
.wcbb-summary-items{min-height:50px;}
.wcbb-summary-empty{color:#9ca3af; font-style:italic; margin:0;}

/* FIX 4: Summary line — hide price, show only name + meta */
.wcbb-summary-line{
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:6px 0; border-bottom:1px solid #f3f4f6; font-size:.88rem;
}
.wcbb-summary-line:last-child{border-bottom:none;}
.sline-name{font-weight:600; color:#111;}
.sline-meta{font-size:.76rem; color:#6b7280; margin-top:2px;}
/* FIX 4: Hide individual product price */
.sline-price{display:none;}

/* Summary right panel */
.wcbb-summary-right{
    display:flex; flex-direction:column; align-items:stretch;
    gap:14px; min-width:220px; max-width:270px; width:100%;
}
.wcbb-summary-total-wrap{text-align:center;}
.wcbb-total-label{
    display:block; font-size:.72rem; color:#6b7280;
    text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px;
}
.wcbb-total-price{
    display:block; font-size:2.1rem; font-weight:800; color:#111; line-height:1.1;
}
.wcbb-fixed-note{display:block; font-size:.73rem; color:#6b7280; margin-top:2px;}

.wcbb-summary-logo{text-align:center;}
.wcbb-summary-logo img{
    max-width:140px; max-height:70px; object-fit:contain;
    border-radius:6px; display:inline-block;
}

/* ── CUSTOMER LOGO UPLOAD ─────────────────────────────────────── */
.wcbb-logo-upload-wrap{
    background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px;
    padding:16px; display:flex; flex-direction:column; gap:8px;
}
.wcbb-logo-upload-title{margin:0; font-size:.9rem; font-weight:700; color:#111;}
.wcbb-logo-upload-note{margin:0; font-size:.78rem; color:#6b7280; line-height:1.5;}
.wcbb-logo-upload-label{
    display:flex; align-items:center; gap:10px;
    cursor:pointer; flex-wrap:wrap;
}
.wcbb-logo-file-input{
    position:absolute; width:1px; height:1px; opacity:0; overflow:hidden;
}
.wcbb-logo-choose-btn{
    display:inline-flex; align-items:center; gap:5px;
    background:#fff; border:1px solid #d1d5db; border-radius:6px;
    padding:7px 14px; font-size:.82rem; font-weight:600; color:#374151;
    white-space:nowrap; transition:background .15s, border-color .15s; cursor:pointer;
}
.wcbb-logo-upload-label:hover .wcbb-logo-choose-btn{background:#f3f4f6; border-color:#9ca3af;}
.wcbb-logo-filename{font-size:.8rem; color:#6b7280; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wcbb-logo-upload-max{margin:0; font-size:.74rem; color:#9ca3af;}
.wcbb-logo-preview-wrap{display:flex; align-items:center; gap:10px; margin-top:4px;}
.wcbb-logo-preview-wrap img{
    max-width:80px; max-height:50px; object-fit:contain;
    border-radius:4px; border:1px solid #e5e7eb; background:#fff; padding:2px;
}
.wcbb-logo-clear-btn{
    background:none; border:none; color:#dc2626;
    font-size:.78rem; cursor:pointer; padding:4px 6px;
    border-radius:4px; transition:background .15s;
}
.wcbb-logo-clear-btn:hover{background:#fef2f2;}

/* ── CHECKOUT BUTTON ──────────────────────────────────────────── */
.wcbb-checkout-btn{
    display:block; width:100%; padding:14px 20px;
    background:#ea580c; color:#fff; border:none; border-radius:8px;
    font-size:.95rem; font-weight:700; cursor:pointer;
    letter-spacing:.03em; text-align:center;
    transition:background .2s, transform .1s;
}
.wcbb-checkout-btn:hover:not(:disabled){background:#c2410c; transform:translateY(-1px);}
.wcbb-checkout-btn:disabled{background:#d1d5db; color:#9ca3af; cursor:not-allowed; transform:none;}

/* ── STICKY FOOTER ────────────────────────────────────────────── */
.wcbb-sticky-footer{
    position:fixed; bottom:0; left:0; right:0;
    background:#111827; z-index:9999;
    box-shadow:0 -3px 18px rgba(0,0,0,.3);
}
.wcbb-sticky-inner{
    display:flex; align-items:center; gap:14px;
    max-width:1200px; margin:0 auto;
    padding:11px 24px; flex-wrap:nowrap;
}
.wcbb-sticky-logo{height:34px; width:auto; border-radius:4px; object-fit:contain; flex-shrink:0;}
.wcbb-sticky-title{font-size:.85rem; font-weight:700; color:#fff; white-space:nowrap; flex-shrink:0;}
.wcbb-sticky-steps{display:flex; gap:8px; flex:1; flex-wrap:wrap;}
.wcbb-sticky-step{
    display:flex; flex-direction:column; align-items:center;
    background:rgba(255,255,255,.08); border-radius:6px;
    padding:4px 12px; min-width:72px; transition:background .2s;
}
.wcbb-sticky-step.complete{background:rgba(16,185,129,.22);}
.wcbb-sticky-label{font-size:.64rem; color:#9ca3af; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;}
.wcbb-sticky-count{font-size:.88rem; font-weight:700; color:#fff;}
.wcbb-sticky-step.complete .wcbb-sticky-count{color:#6ee7b7;}
.wcbb-sticky-price-wrap{flex-shrink:0;}
.wcbb-sticky-price{font-size:1.2rem; font-weight:800; color:#fff; white-space:nowrap;}
.wcbb-sticky-checkout{
    background:#ea580c; color:#fff; border:none; border-radius:8px;
    padding:10px 20px; font-size:.85rem; font-weight:700;
    cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background .2s;
}
.wcbb-sticky-checkout:hover:not(:disabled){background:#c2410c;}
.wcbb-sticky-checkout:disabled{background:#374151; color:#6b7280; cursor:not-allowed;}

/* ── SPINNER ──────────────────────────────────────────────────── */
.wcbb-spinner{
    display:inline-block; width:14px; height:14px;
    border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
    border-radius:50%; animation:wcbb-spin .6s linear infinite;
    vertical-align:middle; margin-left:6px;
}
@keyframes wcbb-spin{to{transform:rotate(360deg);}}

/* ================================================================
   FIX 5 – MOBILE RESPONSIVE (3 breakpoints)
   ================================================================ */

/* ── Tablet 960px ─────────────────────────────────────────────── */
@media(max-width:960px){
    .wcbb-col-headers,
    .wcbb-main-row{
        grid-template-columns: 54px 1fr 140px 120px 120px 110px;
    }
    .wcbb-step-body{padding:0 16px 16px;}
    .wcbb-step-header{padding:14px 16px;}
}

/* ── Tablet 768px — 2-row stacked ─────────────────────────────── */
@media(max-width:768px){
    .wcbb-col-headers{display:none;}

    .wcbb-main-row{
        display:grid;
        grid-template-columns: 52px 1fr auto;
        grid-template-rows: auto auto auto;
        row-gap:8px;
        padding:12px 0;
        column-gap:10px;
    }

    /* Row 1: Thumb | Product select | Remove btn */
    .wcbb-thumb         { grid-row:1; grid-column:1; }
    .wcbb-col-product   { grid-row:1; grid-column:2; }
    .wcbb-col-action    { grid-row:1; grid-column:3; justify-content:flex-end; align-self:center; }

    /* Row 2: — | Colour | Size (side by side) */
    .wcbb-col-colour    { grid-row:2; grid-column:2; }
    .wcbb-col-size      { grid-row:2; grid-column:3; }

    /* Row 3: — | Qty (horizontal, left-aligned) */
    .wcbb-col-qty       { grid-row:3; grid-column:2; justify-content:flex-start; }

    /* Summary stacks */
    .wcbb-summary       { flex-direction:column; gap:16px; }
    .wcbb-summary-right { max-width:100%; }
    .wcbb-total-price   { font-size:1.8rem; }

    /* Sticky footer: wrap steps to next line */
    .wcbb-sticky-inner  { flex-wrap:wrap; gap:8px; }
    .wcbb-sticky-steps  { width:100%; order:3; }
    .wcbb-sticky-price-wrap{ margin-left:auto; }
}

/* ── Mobile 480px — full single column ────────────────────────── */
@media(max-width:480px){
    .wcbb-step-header   { padding:12px 14px; border-radius:8px 8px 0 0; }
    .wcbb-step-header h2{ font-size:.92rem; }
    .wcbb-step-progress { font-size:.78rem; padding:4px 10px; }
    .wcbb-step-body     { padding:0 12px 14px; }

    .wcbb-main-row{
        display:grid;
        grid-template-columns: 46px 1fr;
        grid-template-rows: auto auto auto auto;
        row-gap:8px;
        column-gap:10px;
        padding:10px 0;
    }

    .wcbb-thumb         { grid-row:1; grid-column:1; width:44px; height:44px; }
    .wcbb-col-product   { grid-row:1; grid-column:2; }
    .wcbb-col-colour    { grid-row:2; grid-column:1 / -1; }
    .wcbb-col-size      { grid-row:3; grid-column:1 / -1; }
    .wcbb-col-qty       { grid-row:4; grid-column:1; justify-content:flex-start; }
    .wcbb-col-action    { grid-row:4; grid-column:2; justify-content:flex-end; align-self:center; }

    /* Fix 1: placeholder full width on mobile */
    .wcbb-var-placeholder{ width:100%; }

    /* Fix 2: Qty ctrl stays horizontal on mobile */
    .wcbb-qty-ctrl      { flex-direction:row; }

    .wcbb-summary       { padding:14px; }
    .wcbb-total-price   { font-size:1.6rem; }
    .wcbb-summary-right { max-width:100%; align-items:stretch; }
    .wcbb-checkout-btn  { font-size:.9rem; padding:13px; }

    /* Sticky: 2-row full-width on mobile */
    .wcbb-sticky-inner{
        flex-wrap:wrap; padding:10px 14px; gap:8px;
    }
    .wcbb-sticky-logo   { height:26px; }
    .wcbb-sticky-title  { font-size:.78rem; }
    .wcbb-sticky-steps  { width:100%; order:3; gap:6px; }
    .wcbb-sticky-step   { min-width:60px; padding:3px 8px; }
    .wcbb-sticky-label  { font-size:.6rem; }
    .wcbb-sticky-count  { font-size:.8rem; }
    .wcbb-sticky-price-wrap { margin-left:auto; }
    .wcbb-sticky-checkout{
        width:100%; order:4; text-align:center; padding:11px;
        font-size:.88rem;
    }

    .wcbb-step-add-wrap { flex-wrap:wrap; }
    .wcbb-limit-note    { width:100%; }
}