/* ============================================================
   WC Product Bundles — Frontend — Shopify-clean style
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

.wcpb-wrapper {
    --wcpb-accent:       #111111;
    --wcpb-accent-light: #f3f3f3;
    --wcpb-selected-bg:  #fff;
    --wcpb-selected-bd:  #111111;
    --wcpb-badge-bg:     #111111;
    --wcpb-badge-color:  #ffffff;
    --wcpb-save-bg:      #d4f4e2;
    --wcpb-save-color:   #166534;
    --wcpb-radius:       12px;
    --wcpb-font:         'DM Sans', -apple-system, sans-serif;

    font-family: var(--wcpb-font);
    margin: 0 0 24px;
    width: 100%;
    max-width: 520px;
}

.wcpb-header { margin-bottom: 14px; }

.wcpb-title {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    margin: 0 0 4px;
    letter-spacing: -0.2px;
}

.wcpb-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

/* ── Options list ── */
.wcpb-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Single option card ── */
.wcpb-option {
    position: relative;
    border: 2px solid #e5e7eb;
    border-radius: var(--wcpb-radius);
    background: #fafafa;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    user-select: none;
    overflow: visible;
}

.wcpb-option:hover {
    border-color: #d1d5db;
    background: #f9f9f9;
}

.wcpb-option.wcpb-selected {
    border-color: var(--wcpb-selected-bd);
    background: var(--wcpb-selected-bg);
    box-shadow: 0 0 0 1px var(--wcpb-selected-bd);
}

/* ── Badge ── */
.wcpb-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wcpb-badge-bg);
    color: var(--wcpb-badge-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    z-index: 2;
}

.wcpb-option.wcpb-selected .wcpb-badge {
    background: var(--wcpb-accent);
}

/* ── Inner layout ── */
.wcpb-option-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
}

/* ── Radio dot ── */
.wcpb-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .18s;
}

.wcpb-option.wcpb-selected .wcpb-radio {
    border-color: var(--wcpb-accent);
}

.wcpb-radio-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--wcpb-accent);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity .18s, transform .18s;
}

.wcpb-option.wcpb-selected .wcpb-radio-dot {
    opacity: 1;
    transform: scale(1);
}

/* ── Info block ── */
.wcpb-option-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wcpb-option-qty-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wcpb-qty-label {
    font-size: 14px;
    font-weight: 600;
    color: #111;
}

.wcpb-qty-label strong {
    font-weight: 800;
}

.wcpb-option-label {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 20px;
}

.wcpb-save-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    background: var(--wcpb-save-bg);
    color: var(--wcpb-save-color);
    padding: 2px 8px;
    border-radius: 20px;
    width: fit-content;
}

/* ── Pricing block ── */
.wcpb-pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.wcpb-original-price {
    font-size: 12px;
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 500;
}

.wcpb-price {
    font-size: 17px;
    font-weight: 800;
    color: #111;
    letter-spacing: -0.5px;
}

.wcpb-per-unit {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}

/* ── Hide default WC qty when bundle is active ── */
.wcpb-qty-hidden { display: none !important; }

/* ── Pulse on selection ── */
@keyframes wcpb-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.01); }
    100% { transform: scale(1); }
}
.wcpb-option.wcpb-selected {
    animation: wcpb-pop .22s ease;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .wcpb-option-inner { padding: 12px 14px; gap: 10px; }
    .wcpb-price { font-size: 15px; }
    .wcpb-qty-label { font-size: 13px; }
}


.wcpb-wrapper{
    background: var(--wcpb-bg);
    border-radius: 24px;
    padding: 24px;
}

.wcpb-option{
    background: var(--wcpb-option-bg) !important;
    border:2px solid var(--wcpb-border) !important;
    transition:all .25s ease;
    border-radius:20px;
}

.wcpb-option:hover{
    transform:translateY(-2px);
}

.wcpb-selected{
    border-color:var(--wcpb-primary) !important;
    box-shadow:0 0 0 4px rgba(0,0,0,0.04);
}

.wcpb-badge{
    background:var(--wcpb-badge) !important;
    color:var(--wcpb-badge-text) !important;
    border-radius:999px;
    padding:8px 14px;
    font-weight:700;
}

.wcpb-price{
    color:var(--wcpb-selected) !important;
    font-size:18px;
    font-weight:800;
}

.wcpb-save-tag{
    background:var(--wcpb-primary);
    color:#fff;
    padding:6px 10px;
    border-radius:999px;
    font-weight:700;
}


.wcpb-wrapper{
    width:100% !important;
    max-width:100% !important;
    padding:24px 18px !important;
}

@media(max-width:768px){
    .wcpb-wrapper{
        width:calc(100vw - 20px) !important;
        max-width:calc(100vw - 20px) !important;
        margin-left:-10px !important;
        border-radius:22px;
    }

    .wcpb-option{
        padding:18px !important;
    }
}

.wcpb-option-title,
.wcpb-option label,
.wcpb-label{
    color:var(--wcpb-label) !important;
}

.wcpb-header{
    text-align:center;
    margin-bottom:18px;
}

.wcpb-section-title{
    font-size:32px;
    line-height:1.1;
    font-weight:800;
    margin-bottom:10px;
    letter-spacing:-1px;
}

.wcpb-section-subtitle{
    font-size:15px;
    opacity:.75;
    max-width:600px;
    margin:0 auto;
    line-height:1.6;
}

@media(max-width:768px){
    .wcpb-section-title{
        font-size:26px;
    }

    .wcpb-section-subtitle{
        font-size:14px;
    }
}