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

.j2c-fitment {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.j2c-fitment-progress {
    font-weight: 600;
    margin: 0;
}

.j2c-fitment-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.j2c-fitment-level label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.j2c-fitment-level select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* input_type: 'search' — type-to-filter combobox layered over the hidden <select> (PRD §9.1). */
.j2c-fitment-combobox {
    position: relative;
}

.j2c-fitment-combobox-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bs-body-color, #212529);
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
}

.j2c-fitment-combobox-input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.j2c-fitment-combobox-listbox {
    position: absolute;
    z-index: 20;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: 100%;
    margin: 0.25rem 0 0;
    padding: 0.25rem 0;
    max-height: 16rem;
    overflow-y: auto;
    list-style: none;
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.j2c-fitment-combobox-option {
    padding: 0.375rem 0.75rem;
    cursor: pointer;
}

.j2c-fitment-combobox-option-active,
.j2c-fitment-combobox-option:hover {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.j2c-fitment-combobox-option-selected {
    font-weight: 600;
}

.j2c-fitment-combobox-empty {
    padding: 0.375rem 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
}

.j2c-fitment-actions {
    display: flex;
    gap: 0.5rem;
}

.j2c-fitment-save-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.j2c-fitment-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.j2c-fitment-result-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    text-decoration: none;
    color: inherit;
}

.j2c-fitment-result-price {
    font-weight: 600;
}

.j2c-fitment-no-results {
    padding: 0.75rem;
    border: 1px dashed var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
}

.j2c-fitment-saved-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.j2c-fitment-saved-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
}

.j2c-fitment-saved-item-active {
    border-color: var(--bs-primary, #0d6efd);
}

.j2c-fitment-saved-label {
    flex: 1 1 auto;
}

/* ---- Responsive offcanvas (mobile + tablet) ----------------------------
 *
 * Integrator note: .j2c-fitment-panel is position:fixed while open, so any
 * ancestor the host template gives a position + z-index (or a transform/filter)
 * opens a stacking context the drawer cannot escape, and a sticky header will
 * paint over it. If that happens, lift the wrapper while the drawer is on
 * screen rather than raising the panel:
 *
 *   .your-wrapper:has(.j2c-fitment-panel.show, .j2c-fitment-panel.showing) {
 *       z-index: 1046;
 *   }
 */

/*
 * Bootstrap's .offcanvas-lg resets itself to static markup at >=992px on its own
 * (padding 0, transparent background, header hidden), so nothing here has to undo
 * that. The one thing it does change is .offcanvas-body -> display:flex, which
 * shrink-wraps a single child; put it back to block so the desktop layout is what
 * it was before the wrapper existed.
 */
@media (min-width: 992px) {
    .j2c-fitment-panel > .offcanvas-body {
        display: block;
    }
}

/* Under the breakpoint the panel is a real drawer: one control per row. */
@media (max-width: 991.98px) {
    .j2c-fitment-panel .j2c-fitment-controls,
    .j2c-fitment-panel .j2c-fitment-strip-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .j2c-fitment-panel .j2c-fitment-level,
    .j2c-fitment-panel .j2c-fitment-strip-submit {
        width: 100%;
    }

    .j2c-fitment-panel .j2c-fitment-strip-submit {
        flex-wrap: wrap;
    }
}