/**
 * J2Commerce Findbar (mod_j2commerce_findbar) — Walther-specific overrides
 * Harmonized with walther-uikit.css
 * Works with YOOtheme Pro + UIkit + both light/dark styles
 */

.j2c-findbar {
    position: relative;
    display: block;
    font-size: 0.95rem;
}

.j2c-findbar__field {
    position: relative;
    display: flex;
    align-items: center;
}

.j2c-findbar__input {
    width: 100%;
    padding-right: 2.5rem;
    background: var(--global-background);
    color: var(--global-emphasis-color);
    border: 1px solid var(--global-border);
    border-radius: var(--wuk-card-radius, 0.375rem);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.j2c-findbar__icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--global-muted-color);
    pointer-events: none;
    z-index: 2;
}

/* Clear button */
.j2c-findbar__clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--global-background);
    color: var(--global-warning-background, #dc3545);
    cursor: pointer;
    box-shadow: 0 0 0 2px var(--global-background);
}

.j2c-findbar__field.has-value .j2c-findbar__clear {
    display: flex;
}

.j2c-findbar__field.has-value .j2c-findbar__icon {
    display: none;
}

.j2c-findbar__clear:hover,
.j2c-findbar__clear:focus-visible {
    background: var(--global-warning-background, #dc3545);
    color: var(--global-inverse-color, #fff);
    box-shadow: 0 0 0 2px var(--global-warning-background, #dc3545);
}

.j2c-findbar__input::-webkit-search-cancel-button,
.j2c-findbar__input::-ms-clear {
    display: none;
}

/* ============================================================
   Panels / Modals – Strong contrast override
   ============================================================ */
.j2c-findbar__panel,
.j2c-findbar__modal-dialog,
.j2c-findbar__uk-offcanvas-panel {
    background: var(--global-background, #ffffff) !important;
    color: var(--global-emphasis-color, #1a1a1a) !important;
    border: 1px solid var(--global-border, #dee2e6) !important;
    border-radius: var(--wuk-card-radius, 0.375rem);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}

.j2c-findbar__panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 28rem;
    overflow-y: auto;
}

/* Search input inside panels/modals */
.j2c-findbar__panel .j2c-findbar__input,
.j2c-findbar__modal-body .j2c-findbar__input,
.j2c-findbar__uk-offcanvas-body .j2c-findbar__input {
    background: var(--global-background) !important;
    color: var(--global-emphasis-color) !important;
    border-color: var(--global-border) !important;
}

.j2c-findbar__panel .j2c-findbar__input:focus,
.j2c-findbar__modal-body .j2c-findbar__input:focus,
.j2c-findbar__uk-offcanvas-body .j2c-findbar__input:focus {
    border-color: var(--global-primary-background, #1e87f0) !important;
    box-shadow: 0 0 0 0.2rem rgba(30, 135, 240, 0.15) !important;
}

/* ============================================================
   Results List
   ============================================================ */
.j2c-findbar__results,
.j2c-findbar__list,
.j2c-findbar__empty,
.j2c-findbar__status {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
}

.j2c-findbar__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    min-height: 44px;
    cursor: pointer;
    border-bottom: 1px solid var(--global-border, #eeeeee);
    color: var(--global-emphasis-color);
}

.j2c-findbar__item:last-child {
    border-bottom: 0;
}

.j2c-findbar__item:hover,
.j2c-findbar__item.is-active,
.j2c-findbar__item[aria-selected="true"] {
    background: var(--global-muted-background, #f5f5f5);
}

/* Thumbnail */
.j2c-findbar__thumb-wrap {
    flex-shrink: 0;
    width: 56px;
    aspect-ratio: 1 / 1;
    background: var(--global-muted-background, #f0f0f0);
    border-radius: var(--wuk-card-radius, 0.25rem);
    overflow: hidden;
}

.j2c-findbar__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text content */
.j2c-findbar__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.j2c-findbar__link,
.j2c-findbar__title {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.j2c-findbar__link:hover {
    color: inherit;
    text-decoration: underline;
}

/* Highlighted terms */
.j2c-findbar__link mark,
.j2c-findbar__title mark {
    background: var(--global-warning-background, #fff3cd);
    color: inherit;
    padding: 0 0.1em;
    font-weight: 700;
    border-radius: 0.1em;
}

/* Meta (price + stock) */
.j2c-findbar__meta {
    display: flex;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--global-muted-color, #555);
}

.j2c-findbar__price {
    font-weight: 600;
    color: var(--global-emphasis-color, #111);
}

.j2c-findbar__stock--in_stock { color: #198754; }
.j2c-findbar__stock--out_of_stock { color: var(--global-warning-background, #dc3545); }

/* ============================================================
   Grid Variant
   ============================================================ */
.j2c-findbar--grid .j2c-findbar__panel {
    max-width: 56rem;
}

.j2c-findbar__grid {
    padding: 0.75rem;
}

.j2c-findbar__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--global-background);
    border: 1px solid var(--global-border);
    border-radius: var(--wuk-card-radius, 0.375rem);
    overflow: hidden;
    transition: box-shadow .15s ease;
    text-decoration: none;
    color: var(--global-emphasis-color);
}

.j2c-findbar__card:hover {
    box-shadow: var(--wuk-shadow-hover, 0 0.25rem 0.75rem rgba(0,0,0,.08));
    color: var(--global-emphasis-color);
}

.j2c-findbar__card-media {
    aspect-ratio: var(--j2c-findbar-aspect, 1 / 1);
    background: var(--global-muted-background);
}

.j2c-findbar__card-media .j2c-findbar__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Integration with main product cards */
.j2c-findbar .j2commerce-product-item,
.j2c-findbar__grid .uk-card {
    height: 100%;
    margin: 0;
    background: var(--global-background) !important;
    border-color: var(--global-border) !important;
}

/* ============================================================
   Modal & Utilities
   ============================================================ */
.j2c-findbar__modal-header {
    background: var(--global-emphasis-color, #2c2c2c);
    color: var(--global-inverse-color, #fff);
}

.j2c-findbar__showall-footer {
    border-top: 1px solid var(--global-border, #eee);
    background: var(--global-muted-background, #f8f9fa);
}

.j2c-findbar__showall-btn {
    color: var(--global-link-color, #1e87f0);
    font-weight: 600;
    min-height: 44px;
}

.j2c-findbar__showall-btn:hover {
    background: var(--global-muted-background);
    color: var(--global-link-hover-color);
    text-decoration: underline;
}

/* Focus styles (consistent with UIkit) */
.j2c-findbar__input:focus-visible,
.j2c-findbar__item:focus-visible,
.j2c-findbar__link:focus-visible,
.j2c-findbar__card-item:focus-visible {
    outline: 3px solid var(--global-primary-background, #1e87f0);
    outline-offset: 2px;
}

.j2commerce-single-product.uikit .count-input button {
    background:      transparent;
    border:          0;
    width:           2.25rem;
    height:          2.25rem;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    color:           var(--global-emphasis-color, #212529);
    padding:     0;
    line-height: 1;
    min-width:   0;
}
/* ==================================================
   J2Commerce Model filter – force full width (UIKit)
   ================================================== */

/* Outer Choices container */
.choices:has(.j2commerce-pfilter-select),
.choices:has([data-group-alias="model"]),
.j2commerce-pfilter-select.choices__input {
    width: 100% !important;
    max-width: 100%;
}

/* The visible box */
.choices .choices__inner {
    width: 100% !important;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 40px;          /* closer to UIKit form height */
}

/* Selected tags list */
.choices__list--multiple {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
}

/* The selected item itself */
.choices__item.choices__item--selectable.is-selected {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

/* Search input inside Choices */
.choices__input.choices__input--cloned {
    min-width: 0 !important;   /* kills the hardcoded 28ch that often causes overflow */
    flex: 1 1 auto;
    width: auto !important;
}
/* ============================================
   J2Commerce Status Badges – UIKit 3 Labels
   Paste into YOOtheme Custom CSS
   ============================================ */

/* Base label reset so they look consistent */
.j2store-order-status,
.j2c-status,
.product-status,
.order-status,
.j2store-label,
[class*="status-"] {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.15em 0.55em;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* ===== Core UIKit Label Modifiers ===== */
.uk-label,
.j2store-order-status.uk-label,
.j2c-status.uk-label {
    background: #1e87f0;          /* default blue */
    color: #fff;
}

.uk-label-success,
.status-confirmed,
.status-processed,
.status-shipped,
.status-completed,
.status-paid,
.status-in-stock {
    background: #32d296 !important;   /* green */
    color: #fff !important;
}

.uk-label-warning,
.status-pending,
.status-new,
.status-on-hold,
.status-processing,
.status-backorder {
    background: #faa05a !important;   /* orange */
    color: #fff !important;
}

.uk-label-danger,
.status-failed,
.status-cancelled,
.status-canceled,
.status-refunded,
.status-out-of-stock,
.status-discontinued {
    background: #f0506e !important;   /* red */
    color: #fff !important;
}

/* ===== Extra common statuses ===== */
.status-shipped,
.status-fulfilled {
    background: #32d296 !important;
    color: #fff !important;
}

.status-partially-shipped,
.status-partial {
    background: #1e87f0 !important;
    color: #fff !important;
}

.status-awaiting-payment,
.status-unpaid {
    background: #faa05a !important;
    color: #fff !important;
}

.status-refunded,
.status-returned {
    background: #999 !important;
    color: #fff !important;
}

/* Product badges (Sale / New / Featured) */
.product-badge,
.j2store-product-badge,
.badge-sale,
.badge-new,
.badge-featured {
    display: inline-block;
    padding: 0.2em 0.6em;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 2px;
    line-height: 1.3;
}

.badge-sale,
.product-badge-sale {
    background: #f0506e;
    color: #fff;
}

.badge-new,
.product-badge-new {
    background: #32d296;
    color: #fff;
}

.badge-featured,
.product-badge-featured {
    background: #1e87f0;
    color: #fff;
}

/* Optional: make labels a bit more pill-shaped */
.uk-label,
.j2store-order-status,
.j2c-status {
    border-radius: 20px;   /* remove this line if you prefer sharp corners */
}
/* =====================================================
   J2Commerce Order Status Badges – Global Override
   Covers: New | Processed | Cancelled | Shipped | Delivered
   ===================================================== */

/* Base style for every status badge */
.uk-badge.badge,
span.uk-badge.badge {
    display: inline-block !important;
    padding: 3px 11px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    border-radius: 12px !important;          /* pill shape */
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    border: none !important;
    box-shadow: none !important;
    vertical-align: middle !important;
}

/* ===== CANCELLED ===== */
.uk-badge.badge.text-bg-secondary,
.uk-badge.badge.text-bg-dark,
.uk-badge.badge.status-cancelled {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* ===== NEW ===== */
.uk-badge.badge.text-bg-warning {
    background-color: #e67e22 !important;    /* warm orange */
    color: #ffffff !important;
}

/* ===== PROCESSED ===== */
.uk-badge.badge.text-bg-info {
    background-color: #2c3e50 !important;    /* dark navy */
    color: #ffffff !important;
}

/* ===== SHIPPED ===== */
.uk-badge.badge.text-bg-primary,
.uk-badge.badge.status-shipped,
.uk-badge.badge:has(+ *:contains("Shipped")),
span.uk-badge.badge:contains("Shipped") {
    background-color: #2980b9 !important;    /* strong blue */
    color: #ffffff !important;
}

/* ===== DELIVERED ===== */
.uk-badge.badge.text-bg-success,
.uk-badge.badge.status-delivered,
span.uk-badge.badge:contains("Delivered") {
    background-color: #27ae60 !important;    /* green */
    color: #ffffff !important;
}

/* Fallback for any other status that might appear */
.uk-badge.badge {
    background-color: #7f8c8d !important;
    color: #ffffff !important;
}