/* Main Container */
#wcb-bundles-wrapper {
    margin: 20px 0;
    max-width: 600px;
}

/* Card Styles */
.wcb-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.wcb-card:hover {
    border-color: #bbb;
}

.wcb-card.wcb-active {
    border: 2.5px solid #192148;
    /* Primary Dark Color */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Card Header */
.wcb-card-header {
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.wcb-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.wcb-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--theme-palette-color-2);
}

.wcb-title-group {
    padding-left: 10px;
    flex-grow: 1;
}

/* Radio Indicator */
.wcb-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    position: relative;
}

.wcb-card.wcb-active .wcb-radio {
    border-color: #131831;
}

.wcb-card.wcb-active .wcb-radio::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #131831;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Price */

/* Also apply the stacking logic globally if desired, or just mobile?
   User said "Make the offer price in the first line... always in the far right".
   Implies global change. Let's apply standard styles first.
*/
.wcb-price {
    font-weight: 600;
    font-size: 16px;
    color: var(--theme-palette-color-2);
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    line-height: 1.2;
}

.wcb-price del {
    color: #555;
    font-size: 0.85em;
    margin-right: 0;
    /* No margin right needed if stacked */
    font-weight: normal;
    text-decoration: line-through;
}

/* Card Content (Expandable) */
.wcb-card-content {
    display: none;
    /* JS will toggle this */
    padding: 0 15px 15px 15px;
    border-top: 1px solid #f0f0f0;
    margin-top: 10px;
}

/* Piece Selector */
.wcb-piece-selector {
    margin-top: 15px;
}

.wcb-piece-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
}

.wcb-attribute-row {
    margin-bottom: 12px;
}

.wcb-attr-label {
    display: block;
    font-size: 13px;
    color: #555;
    margin-bottom: 5px;
    font-weight: 500;
}

.wcb-attr-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Options: Color Circles */
.wcb-option-color {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ddd;
    transition: transform 0.2s;
}

.wcb-option-color:hover {
    transform: scale(1.1);
}

.wcb-option-color.selected {
    box-shadow: 0 0 0 2px #222;
    transform: scale(1.1);
}

.wcb-option-color.disabled {
    opacity: 0.2;
    cursor: not-allowed;
    position: relative;
}

.wcb-option-color.disabled::after {
    content: 'x';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-size: 10px;
}

/* Options: Thumbnails (Images) */
.wcb-option-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ddd;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.2s;
}

.wcb-option-thumb:hover {
    transform: scale(1.1);
}

.wcb-option-thumb.selected {
    box-shadow: 0 0 0 2px #222;
    transform: scale(1.1);
}

.wcb-option-thumb.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(100%);
    position: relative;
}

/* Options: Text/Size Boxes */
.wcb-option-text {
    min-width: 35px;

    height: 35px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    background: #fff;
    transition: all 0.2s;
}

.wcb-option-text:hover {
    border-color: #999;
}

.wcb-option-text.selected {
    background: var(--theme-palette-color-2);
    color: #fff;
    border-color: var(--theme-palette-color-2);
}

.wcb-option-text.disabled {
    background: #f9f9f9;
    color: #ccc;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Add to Cart Button override */
#wcb_main_add_to_cart {
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    font-size: 16px;
    /* Often theme styles override this, but we ensure basic prominent style */
    display: block;
    text-align: center;
}


.wcb-separator {
    height: 1px;
    background: #eee;
    margin: 15px 0;
}


@media (max-width: 768px) {

    /* Keep title row nicely spaced */
    .wcb-title-row {
        align-items: flex-start;
        /* Align top since price will be taller */
    }

    .wcb-radio {
        margin-top: 5px;
        /* Align radio with the first line of text roughly */
    }

    .wcb-title {
        margin-right: auto;
        /* Push price to the right if we use flex/block */
        padding-left: 10px;
    }

    .wcb-price {
        /* Already defined globally, but ensure specific overrides if needed */
        margin-left: 10px;
        white-space: nowrap;
    }
}

/* Single Mode Wrapper */
.wcb-single-content {
    margin-bottom: 20px;
}