/**
 * WizVariantDrawer v2 — Widget chrome styles only.
 *
 * Per-row / per-column / per-item layout is driven by inline styles emitted
 * from the widget's row / column / item repeaters (see vd-helpers.php). Visual
 * styling for atom-rendered components (image, name, price, ATC, attribute
 * chips) lives in the atom CSS or the dedicated atom-style sections of the
 * widget — never in this file via CSS-variable indirection.
 *
 * Design intent: keep this file small and predictable. Anything that an
 * implementer is expected to customise via Elementor controls should be
 * targetable directly with a class selector (e.g. .wiz-variantdrawer__title)
 * so Elementor's CSS specificity naturally handles Site Settings → widget
 * overrides without a CSS-var hop.
 */

/* Reserve the scrollbar gutter at the document root so the page width
 * doesn't change when the drawer (or any other modal/drawer) toggles
 * `body { overflow: hidden }`. Without this, opening the drawer hides
 * the body scrollbar (page widens by ~15px) and closing it brings the
 * scrollbar back (page narrows again) — the content visibly jumps and
 * QA called it "extra scroll appearing in cart page". `scrollbar-gutter:
 * stable` keeps the gutter reserved permanently so the toggle is
 * invisible. Modern-browser support since 2022; older browsers ignore. */
html {
    scrollbar-gutter: stable;
}

/* ─── Drawer container ─────────────────────────────────────────────────── */

.wiz-variantdrawer {
    position: fixed;
    inset: 0;
    z-index: 9950;
    pointer-events: none;
}

.wiz-variantdrawer--open {
    pointer-events: auto;
}

.wiz-variantdrawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.wiz-variantdrawer--open .wiz-variantdrawer__overlay {
    opacity: 1;
    pointer-events: auto;
}

.wiz-variantdrawer__drawer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 700px;
    max-width: 100vw;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.wiz-variantdrawer__drawer--right { right: 0; transform: translateX(100%); }
.wiz-variantdrawer__drawer--left  { left: 0;  transform: translateX(-100%); }

.wiz-variantdrawer--open .wiz-variantdrawer__drawer--right,
.wiz-variantdrawer--open .wiz-variantdrawer__drawer--left {
    transform: translateX(0);
}

/* ─── Header ───────────────────────────────────────────────────────────── */

.wiz-variantdrawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.wiz-variantdrawer__header-content {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.wiz-variantdrawer__title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.wiz-variantdrawer__count {
    font-size: 13px;
    color: #6b7280;
}

.wiz-variantdrawer__close {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #111827;
    transition: background 0.15s, color 0.15s;
}

.wiz-variantdrawer__close svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    flex-shrink: 0;
}

/* ─── Chrome area (search / sort / filters / count — row/col/item layout) ─ */

.wiz-variantdrawer__chrome {
    flex-shrink: 0;
    padding: 0 20px;
    border-bottom: 1px solid #e5e7eb;
}

/* Chrome rows/cols — inline flex from helpers, just needs min-width:0 */
.wiz-vd-chrome-row { min-width: 0; }
.wiz-vd-chrome-col { min-width: 0; }

/* Chrome item wrappers — minimal, let content breathe */
.wiz-vd-chrome-item { min-width: 0; }

/* Sort dropdown — compact inline, populated by AJAX */
.wiz-vd-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.wiz-vd-sort:empty { display: none; }

/* Filter dropdowns — horizontal chips, populated by AJAX */
.wiz-vd-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.wiz-vd-filters:empty { display: none; }

/* Result count text — JS populates */
.wiz-vd-result-count {
    font-size: 13px;
    color: #6b7280;
}
.wiz-vd-result-count:empty { display: none; }

/* Clear filters button — hidden by default, JS shows when filters active */
.wiz-vd-clear-filters {
    background: transparent;
    border: none;
    color: var(--primary, var(--wiz-color-primary, #075465));
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    white-space: nowrap;
    text-decoration: underline;
    transition: opacity 0.15s;
}
.wiz-vd-clear-filters:hover { opacity: 0.7; }

/* Hide chrome area when no chrome items configured */
.wiz-variantdrawer__chrome:empty { display: none; }

/* ─── Body (scroll area) ───────────────────────────────────────────────── */

.wiz-variantdrawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 20px;
}

/* Empty state — v1 parity.
 * Mirrors the `.variant-no-results-container` inline styles emitted by
 * drawers/js/variant-drawer.js line ~995-1003 so the UX between v1 and v2
 * stays identical during the migration window. v1 used inline styles
 * because it generated the HTML in JS; v2 owns the same look in CSS. */
.wiz-variantdrawer__empty {
    /* Use flex:1 with the parent .wiz-variantdrawer__body (which is itself
     * flex: 1 1 auto + overflow-y: auto) so the empty state fills available
     * space without forcing a scrollbar. Removed the min-height: 400px that
     * was here before — on smaller viewports it exceeded the drawer body's
     * actual height and triggered the body's overflow-y:auto scrollbar even
     * though there was nothing meaningful to scroll. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    border-radius: 8px;
    color: #333;
    text-align: center;
    overflow: hidden;
}

.wiz-variantdrawer__empty-image {
    width: 250px;
    height: 250px;
    display: block;
    margin: 0 auto 30px auto;
}

.wiz-variantdrawer__empty-heading {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.wiz-variantdrawer__empty-text {
    font-size: 16px;
    padding: 5px;
    color: #333;
    margin: 0;
    line-height: 1.5;
}

/* ─── Variant product (one per item) ───────────────────────────────────── */

/*
 * .wiz-vd-product wraps every variant. Internally it contains one or more
 * .wiz-vd-row → .wiz-vd-col → .wiz-vd-item branches whose flex shape comes
 * from inline styles built by vd-helpers.php from the repeater settings.
 *
 * This file only owns the wrapper, the divider, and the inactive treatment.
 */
.wiz-vd-product {
    border-bottom: 1px solid #e5e7eb;
    padding: 4px 0;
}

.wiz-vd-product:last-child { border-bottom: none; }

.wiz-vd-product--inactive {
    opacity: 0.55;
    pointer-events: none;
}

/* ─── Inventory status — v1 parity inside the variant drawer ──────────────
 * v1 (drawers/css/variant-drawer-css.php:603 .variant-inventory-status-text)
 * renders inventory inside the variant row as PLAIN gray text + icon, NOT
 * as a colored badge with background. The atom default
 * (atoms/InventoryStatus/style.css) uses badge styling (red/amber background)
 * which is right for PLP/PDP cards but visually loud inside the drawer's
 * compact row layout — QA called it out as "default UI not correct".
 *
 * Drawer-scoped override: strip the badge background + padding, set text to
 * v1's gray (#666) and size (12px). Keeps the atom unchanged for other
 * contexts. Status-specific color cues (red/amber) are preserved on the
 * .inventory-out-of-stock / .inventory-backorder modifiers via color only,
 * matching the v1 visual where the text reads in gray with icon contrast. */
.wiz-vd-product .wiz-inventory[data-context="variantdrawer"] {
    background: transparent !important;
    padding: 0;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

.wiz-vd-product .wiz-inventory[data-context="variantdrawer"] .wiz-inventory__text {
    font-size: 12px;
    color: inherit;
}

/* Status modifiers — keep OOS / backorder slightly tinted (matches v1
 * accent without re-introducing the loud badge fill). */
.wiz-vd-product .wiz-inventory[data-context="variantdrawer"].inventory-out-of-stock {
    color: #dc2626;
}
.wiz-vd-product .wiz-inventory[data-context="variantdrawer"].inventory-backorder {
    color: #d97706;
}

@media (max-width: 480px) {
    .wiz-vd-product .wiz-inventory[data-context="variantdrawer"],
    .wiz-vd-product .wiz-inventory[data-context="variantdrawer"] .wiz-inventory__text {
        font-size: 11px;
    }
}

.wiz-vd-row,
.wiz-vd-col {
    /* display:flex + per-item flex props are emitted as inline style */
    min-width: 0;
}

.wiz-vd-item {
    /* Wrapper around an atom or a custom element. Flex/spacing comes from
       inline styles. No layout assumptions baked in here. */
    min-width: 0;
    display: flex;
}

/* ─── Tag overlay on variant image ─────────────────────────────────────── */
/* Tags are auto-overlayed on the top-left of the variant image (see
 * render-content.php case 'image'). The atom-default chip size (12px / 2px 8px
 * padding) is sized for full-bleed product cards on PLP; in the drawer where
 * the image is 120px square, that's slightly too large. Tighten font + padding
 * + offsets here, scoped to the drawer context only so PLP/PDP chips stay
 * unchanged. */
.wiz-vd-product .wiz-tags--positioned {
    top: 6px;
    left: 6px;
    max-width: calc(100% - 12px);
}
.wiz-vd-product .wiz-tags__chip {
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Image item ───────────────────────────────────────────────────────── */

.wiz-vd-image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f9fafb;
    border-radius: 6px;
    overflow: hidden;
    display: block;
}

.wiz-vd-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*
 * Wishlist overlay: when a wishlist item is placed inside the image column
 * (col-image), it floats over the top-right corner of the image instead of
 * stacking below it. Implementer-friendly: drop wishlist into the image
 * column and the overlay treatment is automatic.
 */
.wiz-vd-col--col-image { position: relative; }
.wiz-vd-col--col-image .wiz-vd-item--wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}
.wiz-vd-item--wishlist .wiz-wishlist {
    position: relative;
    top: 0;
    left: 0;
}

/* ─── Inline scalar items (sku / moq / categories) ─────────────────────── */

.wiz-vd-item--sku .wiz-sku {
    font-size: 12px;
    color: #6b7280;
}

.wiz-vd-moq {
    display: inline-block;
    font-size: 12px;
    color: #b45309;
}

.wiz-vd-categories {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── Attribute chips ──────────────────────────────────────────────────── */

/* Attribute chip — v1 parity.
 * Matches `.variant-attribute-item` in drawers/css/variant-drawer-css.php:1721
 * so the v2 variant drawer renders attributes (Color, Size, etc.) with the
 * same visual treatment as the v1 drawer: rectangular chip, off-white fill,
 * dark text, no pill rounding. Keeping the look consistent between v1 and
 * v2 drawers eases the migration window — implementers don't see a visual
 * regression when a page swaps from v1 to v2. */
.wiz-vd-attr-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    margin-right: 8px;
    margin-bottom: 4px;
    background: #f7f8fa;
    /* Typography matches v1 .variant-attribute-value
     * (drawers/css/variant-drawer-css.php:1738) so the chip text uses the
     * exact same color / size / weight in both v1 and v2 drawers. */
    color: #676D77;
    font-size: 12px;
    font-weight: 500;
    border-radius: 3px;
    line-height: 1.4;
    /* Don't truncate. Previously this had `max-width: 45%` + `nowrap` +
     * `ellipsis` which clipped longer attribute values (e.g. full product
     * names like "Ainsley Blue Floral Tunic") to "Ainsley Blue…". The
     * parent .wiz-vd-attributes container is allowed to flex-wrap so
     * chips that don't fit on one line move to the next instead of
     * getting hidden by overflow. */
    white-space: normal;
    word-break: break-word;
    flex-shrink: 0;
    max-width: 100%;
}

/* Parent of attribute chips — wrap to next line instead of clipping. */
.wiz-vd-attributes,
.wiz-vd-item--attributes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    overflow: visible;
}

/* If the chip ever renders an inline label (e.g. "Color: Red") future
 * render config can wrap the label in .wiz-vd-attr-chip__label and the
 * value in .wiz-vd-attr-chip__value — these mirror v1's two-span
 * structure (variant-attribute-name + variant-attribute-value). */
.wiz-vd-attr-chip__label {
    font-weight: 600;
    color: #666;
    margin-right: 4px;
}
.wiz-vd-attr-chip__value {
    color: #676D77;
    font-size: 12px;
    font-weight: 500;
}

/* ─── Footer ───────────────────────────────────────────────────────────── */

.wiz-variantdrawer__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    flex-shrink: 0;
}

.wiz-variantdrawer__footer-total {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: #111827;
}

.wiz-variantdrawer__footer-total-label {
    font-size: 13px;
    color: #6b7280;
}

.wiz-variantdrawer__footer-total-value {
    font-size: 18px;
    font-weight: 600;
}

.wiz-variantdrawer__done-button {
    padding: 10px 24px;
    background: var(--primary, var(--wiz-color-primary, #075465));
    color: var(--primary-text, var(--wiz-color-primary-text, #fff));
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.wiz-variantdrawer__done-button:hover {
    opacity: 0.9;
}

/* ─── Pagination ───────────────────────────────────────────────────────── */

.wiz-variantdrawer__pagination-container {
    flex-shrink: 0;
    padding: 8px 20px;
    border-top: 1px solid #e5e7eb;
}

.wiz-variantdrawer__pagination-container:empty {
    padding: 0;
    border: none;
}

.wiz-variantdrawer__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.wiz-variantdrawer__page-item {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #374151;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

.wiz-variantdrawer__page-item:hover { background: #f3f4f6; }

.wiz-variantdrawer__page-item--active {
    background: var(--primary, var(--wiz-color-primary, #075465));
    color: var(--primary-text, var(--wiz-color-primary-text, #fff));
}

.wiz-variantdrawer__page-item--active:hover { opacity: 0.9; }

.wiz-variantdrawer__page-item--nav { color: #6b7280; }

.wiz-variantdrawer__page-ellipsis {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: #9ca3af;
}

/* ─── Skeleton ─────────────────────────────────────────────────────────── */

.wiz-variantdrawer__skeleton {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.wiz-variantdrawer__skeleton-img {
    width: 100px;
    height: 100px;
    background: #f3f4f6;
    border-radius: 6px;
    flex-shrink: 0;
    animation: wizVdSkeletonPulse 1.2s ease-in-out infinite;
}

.wiz-variantdrawer__skeleton-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wiz-variantdrawer__skeleton-line {
    background: #f3f4f6;
    border-radius: 4px;
    animation: wizVdSkeletonPulse 1.2s ease-in-out infinite;
}

.wiz-variantdrawer__skeleton-line--title { width: 80%;  height: 20px; }
.wiz-variantdrawer__skeleton-line--sku   { width: 40%;  height: 14px; }
.wiz-variantdrawer__skeleton-line--price { width: 30%;  height: 18px; }
.wiz-variantdrawer__skeleton-line--btn   { width: 100%; height: 36px; margin-top: 8px; }

@keyframes wizVdSkeletonPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* ─── Responsive hide utility classes (driven by repeater switches) ────── */

@media (min-width: 1025px) {
    .wiz-vd-hide-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .wiz-vd-hide-tablet { display: none !important; }
}
@media (max-width: 767px) {
    .wiz-vd-hide-mobile { display: none !important; }

    .wiz-variantdrawer__drawer { width: 100vw !important; }
    .wiz-variantdrawer__header,
    .wiz-variantdrawer__chrome,
    .wiz-variantdrawer__body,
    .wiz-variantdrawer__footer { padding-left: 16px; padding-right: 16px; }
}

/*  attribute hinges overflow*/
.wiz-vd-item--attributes_chips {
    flex-wrap: wrap;
}