/**
 * @package     J2Commerce
 * @subpackage  Plugin.J2Commerce.AppCustomerbought
 *
 * @copyright   (C)2024-2026 J2Commerce, LLC <https://www.j2commerce.com>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

.j2commerce-customerbought {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--bs-light, #f8f9fa);
    border-radius: 0.5rem;
}

.j2commerce-cb-section-title {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
}

/* Static flex grid when Swiper is NOT active */
.j2commerce-cb-grid:not(.swiper) {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
}

.j2commerce-cb-card {
    position: relative;
    padding: 2rem 1rem 1rem;
    background: #fff;
    border-radius: 0.5rem;
    scroll-snap-align: start;
    flex: 0 0 calc(100% / var(--cb-items-per-row, 4) - 2rem);
    min-width: 0;
}

/* Responsive items-per-row driven by CSS custom properties from plugin params */
.j2commerce-cb-grid { --cb-items-per-row: var(--cb-xs, 1); }

@media (min-width: 576px)  { .j2commerce-cb-grid { --cb-items-per-row: var(--cb-sm, 2); } }
@media (min-width: 768px)  { .j2commerce-cb-grid { --cb-items-per-row: var(--cb-md, 3); } }
@media (min-width: 992px)  { .j2commerce-cb-grid { --cb-items-per-row: var(--cb-lg, 4); } }
@media (min-width: 1200px) { .j2commerce-cb-grid { --cb-items-per-row: var(--cb-xl, 4); } }
@media (min-width: 1400px) { .j2commerce-cb-grid { --cb-items-per-row: var(--cb-xxl, 5); } }

/* When Swiper IS active, it manages layout */
.j2commerce-cb-grid.swiper .j2commerce-cb-card {
    flex: none;
}

/* ProductLayoutService cards inside cb-card containers */
.j2commerce-cb-card .j2commerce-product-item {
    width: 100%;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* Hide each card's individual add-to-cart button — the shared "Purchase Together" button handles it.
   IMPORTANT: This ONLY targets buttons inside .j2commerce-cb-card (the customerbought section).
   The main product's "Add to Cart" button is OUTSIDE .j2commerce-customerbought and is NEVER affected. */
.j2commerce-cb-card .j2commerce-cart-buttons .j2commerce-cart-button {
    display: none;
}

/* Hide quantity input within cards — bulk add uses qty=1 per product */
.j2commerce-cb-card .j2commerce-cart-buttons .qty-input {
    display: none;
}

/* Simplify option labels within the constrained card width */
.j2commerce-cb-card .j2commerce-options .form-label {
    font-size: 0.8rem;
}

.j2commerce-cb-card .j2commerce-options .form-select {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}

/* Plus sign between cards — centered in the gap */
.j2commerce-cb-card + .j2commerce-cb-card::before {
    content: '+';
    position: absolute;
    left: -1.25rem;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    font-weight: 400;
    color: var(--bs-secondary, #6c757d);
    z-index: 1;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-light, #f8f9fa);
    border-radius: 50%;
}

/* Checkbox — inside the white card with breathing room */
.j2commerce-cb-check {
    position: absolute;
    top: 0.25rem;
    right: 0.625rem;
    width: 1.125rem;
    height: 1.125rem;
    z-index: 2;
    cursor: pointer;
    margin: 0;
}

.j2commerce-cb-card-primary .j2commerce-cb-check {
    cursor: default;
}

.j2commerce-cb-this-item {
    margin-top: 0.25rem;
}

.j2commerce-cb-total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.j2commerce-cb-total-amount {
    font-size: 1.25rem;
    font-weight: 700;
    margin-left: 0.5rem;
}

.j2commerce-cb-messages .alert {
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Compact option selectors on small screens */
@media (max-width: 575.98px) {
    .j2commerce-cb-card .j2commerce-options .form-select {
        font-size: 0.8rem;
    }

    .j2commerce-cb-total-bar {
        flex-direction: column;
        text-align: center;
    }
}