/**
 * 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.
 */

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

.wiz-variantdrawer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    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 {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #6b7280;
    transition: background 0.15s, color 0.15s;
}

.wiz-variantdrawer__close:hover { background: #f3f4f6; color: #111827; }

/* ─── 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;
}

.wiz-variantdrawer__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #9ca3af;
    text-align: center;
}

.wiz-variantdrawer__empty-text {
    margin-top: 12px;
    font-size: 14px;
}

/* ─── 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;
}

.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;
}

/* ─── 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;
}

/* ─── 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 ──────────────────────────────────────────────────── */

.wiz-vd-attr-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: #f3f4f6;
    color: #374151;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── 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; }
}