/**
 * WooBricks — Add to Wishlist Button
 * Styles driven by CSS custom properties set inline by PHP render().
 *
 * Variables (set on .wbxe-wishlist-btn via inline style):
 *   --wbxe-icon-size    — button icon width/height (px)
 *   --wbxe-color-default — icon/label color at rest
 *   --wbxe-color-active  — icon/label color when added
 *   --wbxe-color-hover   — icon/label color on hover
 */

/* ==========================================================================
   Anchor — only rendered when Target wishlist = "Let user choose" (dropdown).
   Positioning of the button itself comes from the native Bricks Style tab.
   ========================================================================== */

.wbxe-wishlist-anchor {
    display:   inline-flex;
    position:  relative;
    isolation: isolate; /* stacking context for the dropdown */
}

/* ==========================================================================
   Button base
   ========================================================================== */

.wbxe-wishlist-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    cursor:          pointer;
    transition:      color 0.2s ease, transform 0.15s ease;
    line-height:     1;
    text-decoration: none;
}

/*
 * Bare icon button: the inline wishlist rendered by Add to Cart Pro (no native
 * button classes). The standalone element extends the native Bricks Button, so
 * its padding / border / background / colour come from the Style tab — never
 * reset them there.
 */
.wbxe-wishlist-btn:not( .bricks-button ) {
    padding:    0;
    border:     none;
    background: transparent;
    color:      var( --wbxe-color-default, #777 );
}

.wbxe-wishlist-btn:not( .bricks-button ):hover {
    color: var( --wbxe-color-hover, #e74c3c );
}

.wbxe-wishlist-btn:focus-visible {
    outline:        2px solid currentColor;
    outline-offset: 3px;
}

/* Active (product in wishlist) — wins over the native button colour. */
.wbxe-wishlist-btn.wbxe-wishlist-btn--active {
    color: var( --wbxe-color-active, #e74c3c );
}

/* Loading state — visual feedback while API call is in flight */
.wbxe-wishlist-btn--loading {
    pointer-events: none;
    opacity:        0.6;
}

/* ==========================================================================
   Icon
   ========================================================================== */

.wbxe-wishlist-icon {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    /* Default scales with the button's font-size; the "Icon size" control and the
       inline --wbxe-icon-size (Add to Cart Pro) both override this. */
    width:         var( --wbxe-icon-size, 1em );
    height:        var( --wbxe-icon-size, 1em );
}

.wbxe-wishlist-icon svg,
.wbxe-wishlist-icon i {
    width:      100%;
    height:     100%;
    display:    block;
    flex-shrink: 0;
}

/* Default state: show outline, hide filled */
.wbxe-wishlist-icon__default { display: inline-flex; }
.wbxe-wishlist-icon__active  { display: none; }

/* Active state: swap icons */
.wbxe-wishlist-btn--active .wbxe-wishlist-icon__default { display: none; }
.wbxe-wishlist-btn--active .wbxe-wishlist-icon__active  { display: inline-flex; }

/* ==========================================================================
   Label
   ========================================================================== */

.wbxe-wishlist-label {
    font-size:   inherit;
    font-family: inherit;
    line-height: 1.2;
    white-space: nowrap;
}

/* ==========================================================================
   Animations
   ========================================================================== */

/* Pulse — plays when a product is added to the wishlist */
@keyframes wbxe-wishlist-pulse {
    0%   { transform: scale( 1 ); }
    40%  { transform: scale( 1.35 ); }
    70%  { transform: scale( 0.9 ); }
    100% { transform: scale( 1 ); }
}

.wbxe-wishlist-btn--pulse .wbxe-wishlist-icon {
    animation: wbxe-wishlist-pulse 0.4s cubic-bezier( 0.36, 0.07, 0.19, 0.97) both;
}

/* Fade — plays when a product is removed from the wishlist */
@keyframes wbxe-wishlist-fade {
    0%   { opacity: 1; }
    50%  { opacity: 0.25; }
    100% { opacity: 1; }
}

.wbxe-wishlist-btn--fade .wbxe-wishlist-icon {
    animation: wbxe-wishlist-fade 0.35s ease both;
}

/* ==========================================================================
   Dropdown (wishlistTarget = 'select')
   ========================================================================== */

.wbxe-wishlist-dropdown {
    position:         absolute;
    top:              calc( 100% + 6px );
    left:             0;
    min-width:        200px;
    max-width:        280px;
    background:       #fff;
    border:           1px solid #dcdcde;
    border-radius:    4px;
    box-shadow:       0 4px 16px rgba( 0, 0, 0, 0.12 );
    z-index:          100;
    padding:          6px 0;
    animation:        wbxe-dropdown-in 0.15s ease;
}

.wbxe-wishlist-dropdown[hidden] {
    display: none;
}

@keyframes wbxe-dropdown-in {
    from { opacity: 0; transform: translateY( -4px ); }
    to   { opacity: 1; transform: translateY( 0 );    }
}

/* Wishlist list inside dropdown */
.wbxe-wishlist-list {
    list-style: none;
    margin:     0;
    padding:    0;
    max-height: 240px;
    overflow-y: auto;
}

.wbxe-wishlist-list li {
    margin: 0;
}

.wbxe-wishlist-list__item {
    display:         block;
    width:           100%;
    padding:         8px 16px;
    border:          none;
    background:      transparent;
    text-align:      left;
    cursor:          pointer;
    font-size:       0.875rem;
    color:           #1d2327;
    transition:      background 0.1s;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
}

.wbxe-wishlist-list__item:hover,
.wbxe-wishlist-list__item:focus-visible {
    background: #f0f0f1;
    outline:    none;
}

/* Checkmark when product is already in this wishlist */
.wbxe-wishlist-list__item--checked::before {
    content:      '✓ ';
    color:        #e74c3c;
    font-weight:  600;
}

/* Separator before "Create new" */
.wbxe-wishlist-create-new {
    display:         block;
    width:           100%;
    padding:         8px 16px;
    border:          none;
    border-top:      1px solid #dcdcde;
    background:      transparent;
    text-align:      left;
    cursor:          pointer;
    font-size:       0.875rem;
    color:           #2271b1;
    transition:      background 0.1s;
    margin-top:      4px;
}

.wbxe-wishlist-create-new:hover,
.wbxe-wishlist-create-new:focus-visible {
    background: #f0f0f1;
    outline:    none;
}

/* Notice (no variant selected, error messages) */
.wbxe-wishlist-notice {
    position:      absolute;
    bottom:        calc( 100% + 6px );
    left:          50%;
    transform:     translateX( -50% );
    background:    #1d2327;
    color:         #fff;
    padding:       5px 10px;
    border-radius: 4px;
    font-size:     0.8125rem;
    white-space:   nowrap;
    pointer-events: none;
    z-index:       200;
    animation:     wbxe-notice-in 0.2s ease;
}

@keyframes wbxe-notice-in {
    from { opacity: 0; transform: translateX( -50% ) translateY( 4px ); }
    to   { opacity: 1; transform: translateX( -50% ) translateY( 0 );   }
}