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

/* Framework-neutral screen-reader-only utility — used in both the bootstrap5 and
   uikit templates so the status region hides visually without depending on
   either framework's own utility class being loaded on the page. */
.j2c-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.j2c-addon-group {
    margin-block: 1rem;
}

.j2c-addon-group__label {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.j2c-addon-group__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.j2c-addon-group__choices .btn,
.j2c-addon-trigger-card,
.j2c-addon-chip__remove,
.j2c-addon-drawer__close {
    min-height: 24px;
    min-width: 24px;
}

.j2c-addon-group__choices .btn:focus-visible,
.j2c-addon-trigger-card:focus-visible,
.j2c-addon-chip__remove:focus-visible,
.j2c-addon-drawer__close:focus-visible,
.j2c-addon-form input:focus-visible,
.j2c-addon-form select:focus-visible,
.j2c-addon-form textarea:focus-visible {
    outline: 3px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.j2c-addon-trigger-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--radius-sm, 0.25rem);
    padding: 0.5rem 0.75rem;
    background: var(--bs-body-bg, #fff);
    text-align: left;
}

.j2c-addon-trigger-card__image {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm, 0.25rem);
}

.j2c-addon-trigger-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.j2c-addon-trigger-card__price {
    font-weight: 600;
}

.j2c-addon-group__chip:empty {
    display: none;
}

.j2c-addon-chip {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--radius-sm, 0.25rem);
    padding: 0.375rem 0.625rem;
    margin-top: 0.5rem;
}

.j2c-addon-chip .j2c-drawer-item-attrs {
    flex: 1 1 auto;
    min-width: 0;
}

.j2c-addon-chip__price {
    font-weight: 600;
    margin-inline-start: auto;
    white-space: nowrap;
}

/*
 * De-emphasised text built by infiniteoptions.js. Declared here rather than reached for as
 * bootstrap utilities (.text-body-secondary/.d-block/.text-truncate) because that JS renders
 * on bootstrap5 AND uikit sites — under uikit those class names style nothing. The colour
 * fallback clears 4.5:1 on the chip background (WCAG 1.4.3); never `text-muted`.
 */
.j2c-addon-locked-hint,
.j2c-addon-chip__attr {
    display: block;
    color: var(--bs-secondary-color, #5c636a);
}

.j2c-addon-chip__attr {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Icon-only remove control. Styled here rather than with framework button classes because
 * the chip is built in JS and renders on bootstrap5 and uikit alike. The colour is the
 * glyph's own contrast against the chip (WCAG 1.4.11, 3:1 for a graphical object that
 * identifies a control); the 24px floor above satisfies 2.5.8.
 */
.j2c-addon-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 0.25rem);
    background: none;
    color: var(--bs-danger-text-emphasis, #b02a37);
    line-height: 1;
    cursor: pointer;
}

.j2c-addon-chip__remove:hover {
    border-color: currentColor;
}

.j2c-addon-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(420px, 100vw);
    background: var(--bs-body-bg, #fff);
    box-shadow: -0.25rem 0 1rem rgba(0, 0, 0, 0.15);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    overflow-y: auto;
}

/* Sits behind the drawer/modal panel, catches the "click outside to close". The page itself is
   already inert while the drawer is open (see setBackgroundInert() in infiniteoptions.js), so
   this is the only clickable surface the shopper can reach outside the panel. */
.j2c-addon-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1049;
}

/* Edge variants. The default above is the right-hand panel, so --right only restates it. */
.j2c-addon-drawer--right {
    inset: 0 0 0 auto;
}

.j2c-addon-drawer--left {
    inset: 0 auto 0 0;
    box-shadow: 0.25rem 0 1rem rgba(0, 0, 0, 0.15);
}

.j2c-addon-drawer--top,
.j2c-addon-drawer--bottom {
    inset-inline: 0;
    width: 100vw;
    max-height: min(80vh, 40rem);
}

.j2c-addon-drawer--top {
    top: 0;
    bottom: auto;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
}

.j2c-addon-drawer--bottom {
    top: auto;
    bottom: 0;
    box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.15);
}

.j2c-addon-drawer--modal {
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    width: min(560px, calc(100vw - 2rem));
    max-height: min(85vh, 48rem);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.25);
}

@media (max-width: 576px) {
    /* A modal keeps its centred box on a phone; only the edge panels go full-width. */
    .j2c-addon-drawer:not(.j2c-addon-drawer--modal) {
        width: 100vw;
        padding-inline: 1rem;
    }
}

.j2c-addon-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.j2c-addon-drawer__title {
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 600;
    margin: 0;
}

.j2c-addon-drawer__close {
    flex-shrink: 0;
}

.j2c-addon-drawer__body {
    margin-top: 0.75rem;
}

/*
 * The preview is this plugin's own markup (AppInfiniteoptions::buildPreview), deliberately not
 * the site's list.category.item_* layouts. Kept near-unstyled beyond the panel's own spacing;
 * only the image is capped, because a listing tile is wider than this panel.
 */
.j2c-addon-form__preview {
    margin-bottom: 1rem;
}

.j2c-addon-form__preview-img {
    max-height: 12rem;
    width: auto;
    object-fit: contain;
}

/*
 * Colour is a reinforcement only — "In Stock" / "Out of Stock" already differ in wording, so the
 * state survives for anyone who cannot distinguish the two hues (WCAG 1.4.1 Use of Color).
 */
.j2c-addon-form__preview-stock.in-stock {
    color: var(--bs-success-text-emphasis, #0a3622);
}

.j2c-addon-form__preview-stock.out-of-stock {
    color: var(--bs-danger-text-emphasis, #58151c);
}

.j2c-addon-form__confirm-reason {
    font-size: 0.875rem;
}

.j2c-addon-error {
    color: var(--bs-danger, #dc3545);
    font-size: 0.875rem;
}

/* Radio/checkbox option groups render as <fieldset><legend> — the native grouping
   semantics WCAG wants, reset back to the form's own spacing rather than the
   browser's default fieldset border/padding/legend indent. */
.j2c-addon-form fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
}

.j2c-addon-form legend {
    font-size: inherit;
    padding: 0;
    margin-bottom: 0.5rem;
    float: none;
    width: auto;
}

/*
 * Reproduces the site template's .btn-chip geometry for both frameworks, so the triggers
 * look the same whether or not the active template defines .btn-chip. UIkit needs the
 * explicit overrides because uk-button ships uppercase text, a 38px line-height, 0 30px
 * padding and square corners. Border fallback #6c757d is 4.69:1, clearing WCAG 1.4.11's
 * 3:1 for UI component borders.
 */
.j2c-addon-group__choices .btn,
.j2c-addon-group__choices .uk-button {
    --bs-btn-padding-y: .35rem;
    --bs-btn-padding-x: .9rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-color: var(--brand-text, var(--bs-body-color, #212529));
    --bs-btn-border-color: var(--brand-border-strong, #6c757d);
    --bs-btn-hover-color: var(--brand-text, var(--bs-body-color, #212529));
    --bs-btn-hover-border-color: var(--brand-text, #1a1a1a);
    padding: .35rem .9rem;
    font-size: .875rem;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: none;
    border: 1px solid var(--brand-border-strong, #6c757d);
    border-radius: var(--radius-sm, .25rem);
    background-color: transparent;
    color: var(--brand-text, var(--bs-body-color, #212529));
}

.j2c-addon-group__choices .btn:hover,
.j2c-addon-group__choices .btn:focus,
.j2c-addon-group__choices .uk-button:hover,
.j2c-addon-group__choices .uk-button:focus {
    border-color: var(--brand-text, #1a1a1a);
    color: var(--brand-text, var(--bs-body-color, #212529));
}

/*
 * yesno Yes/No current-state indicator: the button matching the current selection is
 * solid, the other stays outlined. Driven by a class (not aria-pressed) because the
 * Yes button doubles as a drawer trigger (aria-expanded/aria-controls) on items with a
 * variant picker. Colours come from custom properties so a store can rebrand without
 * touching this file; the fallback pair is #1a1a1a on white (17.4:1 text contrast,
 * exceeds WCAG 1.4.3's 4.5:1) with the outline border at Bootstrap's default secondary
 * (4.69:1 against white, exceeds 1.4.11's 3:1 for UI component borders).
 */
.j2c-addon-group__choices .btn.j2c-addon-current,
.j2c-addon-group__choices .uk-button.j2c-addon-current {
    --bs-btn-color: var(--j2c-addon-current-color, #fff);
    --bs-btn-bg: var(--j2c-addon-current-bg, #1a1a1a);
    --bs-btn-border-color: var(--j2c-addon-current-bg, #1a1a1a);
    --bs-btn-hover-color: var(--j2c-addon-current-color, #fff);
    --bs-btn-hover-bg: var(--j2c-addon-current-bg, #1a1a1a);
    --bs-btn-hover-border-color: var(--j2c-addon-current-bg, #1a1a1a);
    color: var(--j2c-addon-current-color, #fff);
    background-color: var(--j2c-addon-current-bg, #1a1a1a);
    border-color: var(--j2c-addon-current-bg, #1a1a1a);
}

/*
 * The add-on's own option list (list.category.item_configurableoptions) already renders
 * every option expanded inside the drawer, so the summary line it would otherwise show
 * above a collapsed list ("Red / 17in") is a redundant restatement of the controls right
 * below it — and any collapse toggle would have nothing left to hide, since the drawer
 * forces list_collapsed_options/collapsed_options to 0.
 */
.j2c-addon-form .j2commerce-options-summary,
.j2c-addon-form .j2commerce-configurable-button {
    display: none;
}