/**
 * WizVariantDrawerTrigger — layout-only CSS.
 * All visual style (colors, padding, borders, typography) flows from
 * Elementor controls in WizVariantDrawerTriggerWidget.php. This file
 * only handles structure: flex layout, alignment, transitions.
 */

.wiz-vdtrigger {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.wiz-vdtrigger > * {
    box-sizing: border-box;
}

.wiz-vdtrigger--no-count {
    /* No count display — collapse the gap reservation */
    gap: 0;
}

.wiz-vdtrigger__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fff;
    color: #000;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
    text-decoration: none;
    white-space: nowrap;
}

.wiz-vdtrigger__button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.wiz-vdtrigger__label {
    display: inline-block;
}

.wiz-vdtrigger__chevron {
    width: 18px;
    height: 18px;
    color: currentColor;
    flex-shrink: 0;
}

.wiz-vdtrigger__count {
    display: flex;
    align-items: center;
}

.wiz-vdtrigger__count-value {
    font-size: 13px;
    color: inherit;
    line-height: 1.4;
}

/* Mobile breakpoint matches the project standard (used in WizViewSimilar,
   WizQuickView, etc. — see helpers/breakpoints.js). Wraps the button + count
   on narrow viewports rather than overflowing horizontally. */
@media (max-width: 767px) {
    .wiz-vdtrigger {
        flex-wrap: wrap;
    }
}