/* ── Product Gallery: automatic vertical centering ──────────────────────────
   WooCommerce puts the gallery in the left flex column and the summary
   (title, price, bundle UI) in the right flex column. The right column is
   taller, so by default the left column stretches to match it — leaving the
   gallery pinned to the top with dead space below.
   Making the gallery block fill the column height (min-height: 100%) and
   turning it into a flex column with justify-content: center automatically
   keeps the image vertically centered no matter how tall the right column
   grows. No pixel values, no theme-specific class names.
───────────────────────────────────────────────────────────────────────────── */
.wp-block-woocommerce-product-image-gallery {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
}

/* ── Bundle UI container ─────────────────────────────────────────────────── */
.choose-your-package {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    font-family: Arial, sans-serif;
    padding: 16px;
    border-radius: 14px;
}

.high-demand {
    background-color: #ffeeee;
    color: #ff0000;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.flame-icon {
    margin-right: 5px;
}

/* ── Bundle option cards ─────────────────────────────────────────────────── */
.bundle-options {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 20px;
}

/*
 * Cards use padding: 0 so the image area and the info area each control
 * their own padding. This prevents the yellow selection background from
 * bleeding into the image portion.
 */
.bundle-option {
    border: 2px solid var(--codebuqu-default-border, #e0e0e0);
    padding: 0;
    text-align: center;
    cursor: pointer;
    flex: 1;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: white;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

/* Only the border changes on the card itself when selected */
.bundle-option.selected {
    border-color: var(--codebuqu-selected-border, #f7dc5a);
}

/* ── Image section — always neutral ─────────────────────────────────────── */
.bundle-image {
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;
}

.bundle-image img {
    max-width: 80%;
    max-height: 90px;
    object-fit: contain;
}

/* ── Info section — highlights on selection ──────────────────────────────── */
.bundle-option-product-info {
    padding: 12px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-top: 1px solid var(--codebuqu-default-border, #e0e0e0);
    transition: background-color 0.3s ease;
}

.bundle-option.selected .bundle-option-product-info {
    background-color: var(--codebuqu-selected-bg, #fff1a4);
    border-top-color: var(--codebuqu-selected-border, #f7dc5a);
}

/* ── Card typography ─────────────────────────────────────────────────────── */
.quantity {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}

.price {
    font-size: 18px;
    font-weight: bold;
    color: var(--codebuqu-price-text, #333);
}

.per-unit {
    font-size: 12px;
    color: var(--codebuqu-secondary-text, #666);
    margin-top: 2px;
}

/* ── Total price area ────────────────────────────────────────────────────── */
.total-price {
    text-align: center;
    margin-bottom: 15px;
}

.original-price {
    text-decoration: line-through;
    color: var(--codebuqu-muted-text, #999);
    margin-right: 10px;
}

.discounted-price {
    font-size: 24px;
    font-weight: bold;
    color: var(--codebuqu-price-text, #333);
}

.saving {
    background-color: var(--codebuqu-saving-badge, #ff0000);
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    margin-left: 10px;
}

.additional-info {
    text-align: center;
    margin-bottom: 15px;
}

/* ── Add to cart button ──────────────────────────────────────────────────── */
.add-to-cart-bundle {
    background-color: var(--codebuqu-button-bg, #ffc00b);
    color: var(--codebuqu-button-text, white);
    border: none;
    padding: 15px;
    font-size: 18px;
    width: 100%;
    cursor: pointer;
    border-radius: 14px;
    transition: opacity 0.3s ease;
}

.add-to-cart-bundle:hover {
    opacity: 0.9;
}

/* ── Footer labels ───────────────────────────────────────────────────────── */
.stock-info,
.secure-transaction {
    text-align: center;
    margin-top: 10px;
    color: var(--codebuqu-secondary-text, #666);
}

.payment-methods {
    text-align: center;
    margin-top: 15px;
}