/**
 * Klav Wishlist - Frontend CSS
 * 
 * Styles the wishlist heart icon to match the Vouge theme's
 * existing Quick View (eye) icon style: skinbgfill-rounded
 * 
 * The Vouge theme uses:
 * - .product-thumb-iconsgroup-style-skinbgfill-rounded
 * - .product-thumb-buttonelement-style-skinbgfill-square
 * - Rounded filled background buttons with white icons
 * - Positioned top-right vertically on product thumbnail
 */

/* ============================================
   WISHLIST ICON - MATCHING QUICK VIEW STYLE
   ============================================ */

/* The wishlist wrapper - matches the wcqv_btn_wrapper structure */
.klav_wl_btn_wrapper {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    line-height: 1;
}

/* The wishlist toggle button - matches Quick View button style */
/* IMPORTANT: Using .klav-wl-btn instead of .button to avoid WooCommerce "Add to Cart" title interference */

/* Extra safeguard: Force-remove WooCommerce classes that might add wrong title */
.klav_wl_btn_wrapper a.klav-wl-toggle.add_to_cart_button,
.klav_wl_btn_wrapper a.klav-wl-toggle.product_type_simple,
.klav_wl_btn_wrapper a.klav-wl-toggle.ajax_add_to_cart {
    /* Override any WooCommerce Add to Cart styles that might bleed in */
}

.klav_wl_btn_wrapper a.klav-wl-btn.klav-wl-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.95);
    color: #333;
    font-size: 0;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Hover state */
.klav_wl_btn_wrapper a.klav-wl-btn.klav-wl-toggle:hover {
    background-color: #e74c3c;
    color: #fff;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.35);
    transform: scale(1.1);
}

/* In-wishlist (active) state - filled heart */
.klav_wl_btn_wrapper a.klav-wl-btn.klav-wl-toggle.in-wishlist {
    background-color: #e74c3c;
    color: #fff;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

.klav_wl_btn_wrapper a.klav-wl-btn.klav-wl-toggle.in-wishlist:hover {
    background-color: #c0392b;
    transform: scale(1.1);
}

/* The SVG icon inside the button */
.klav-wl-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.klav-wl-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.3s ease;
}

/* Filled heart when in wishlist */
.klav-wl-toggle.in-wishlist .klav-wl-icon svg {
    fill: currentColor;
    stroke-width: 1;
}

/* Label text (screen reader only in loop, visible on single) */
.klav-wl-label {
    display: none;
}

/* ============================================
   TOOLTIP - MATCHING THEME STYLE
   ============================================ */

.klav_wl_btn_wrapper[data-tooltip]:hover::before {
    content: attr(data-tooltip);
    position: absolute;
    /* Opens to the LEFT of the icon, vertically centered on it — matching
       the theme's own Quick View / Add to Cart tooltip pattern. The icons
       are stacked vertically (heart under eye) with only a small gap, so
       opening upward or downward makes the tooltip overlap the neighboring
       icon. Opening sideways avoids both the icon above and the card below. */
    top: 50%;
    right: calc(100% + 8px);
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
    max-width: 180px;
    padding: 5px 10px;
    background: #333;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 4px;
    z-index: 99;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.klav_wl_btn_wrapper[data-tooltip]:hover::before {
    opacity: 1;
}

.klav_wl_btn_wrapper[data-tooltip]::after {
    content: '';
    position: absolute;
    /* Arrow sits in the gap between the tooltip and the icon, vertically
       centered, pointing right toward the icon (border-left-color gives a
       right-pointing triangle). */
    top: 50%;
    right: calc(100% + 2px);
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
    border: 4px solid transparent;
    border-left-color: #333;
    z-index: 99;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.klav_wl_btn_wrapper[data-tooltip]:hover::after {
    opacity: 1;
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Heart pulse animation when adding */
@keyframes klavWlPulse {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(0.95); }
    75% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.klav-wl-toggle.klav-wl-pulse {
    animation: klavWlPulse 0.6s ease-out;
}

/* Loading spinner */
@keyframes klavWlSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.klav-wl-toggle.klav-wl-loading {
    pointer-events: none;
}

.klav-wl-toggle.klav-wl-loading .klav-wl-icon svg {
    animation: klavWlSpin 0.8s linear infinite;
}

/* ============================================
   PRODUCT LOOP INTEGRATION
   ============================================ */

/* Position wishlist icon in the product icons area
   This matches the Vouge theme's existing icon group layout */
.wc_inline_buttons .klav_wl_btn_wrapper {
    margin: 3px 0;
}

/* For vertical icon groups (top-right position like Quick View) */
.product-thumb-iconsgroup-position-vertical .wc_inline_buttons .klav_wl_btn_wrapper {
    display: block;
}

/* For horizontal icon groups */
.product-thumb-iconsgroup-position-horizontal .wc_inline_buttons .klav_wl_btn_wrapper {
    display: inline-block;
    margin: 0 3px;
}

/* Hover bounce effect - matching theme's product-icongroup-hover-bounce */
.product-icongroup-hover-bounce .klav_wl_btn_wrapper a.button.klav-wl-toggle {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-icongroup-hover-bounce .product-thumb:hover .klav_wl_btn_wrapper a.button.klav-wl-toggle {
    transform: translateY(0);
    opacity: 1;
}

/* Make wishlist icon visible with other thumb icons */
.product-thumb-content .product-buttons-wrapper.product-icons .wc_inline_buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

/* ============================================
   SINGLE PRODUCT PAGE
   ============================================ */

.klav-wl-single-wrapper {
    display: inline-block;
    margin: 10px 5px 10px 0;
}

.klav-wl-single-wrapper .klav_wl_btn_wrapper a.button.klav-wl-toggle {
    width: auto;
    height: auto;
    padding: 8px 16px;
    border-radius: 4px;
    gap: 8px;
    font-size: 14px;
}

.klav-wl-single-wrapper .klav-wl-label {
    display: inline;
    font-size: 14px;
    font-weight: 500;
}

.klav-wl-single-wrapper .klav-wl-icon svg {
    width: 18px;
    height: 18px;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.klav-wl-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: #333;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 99999;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    max-width: 350px;
}

.klav-wl-toast.klav-wl-toast-show {
    transform: translateY(0);
    opacity: 1;
}

.klav-wl-toast-success {
    background: #27ae60;
}

.klav-wl-toast-info {
    background: #2980b9;
}

.klav-wl-toast-warning {
    background: #f39c12;
}

.klav-wl-toast-error {
    background: #e74c3c;
}

.klav-wl-toast-icon {
    font-size: 18px;
    font-weight: bold;
    flex-shrink: 0;
}

.klav-wl-toast-message {
    line-height: 1.4;
}

/* ============================================
   WISHLIST PAGE
   ============================================ */

.klav-wl-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.klav-wl-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #eee;
}

.klav-wl-page-header h1,
.klav-wl-page-header h2 {
    margin: 0;
    font-size: 28px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.klav-wl-page-header h1 svg,
.klav-wl-page-header h2 svg {
    width: 28px;
    height: 28px;
    fill: #e74c3c;
    stroke: #e74c3c;
}

.klav-wl-page-count {
    color: #999;
    font-size: 14px;
    font-weight: 400;
    margin-left: 8px;
}

.klav-wl-clear-all {
    background: none;
    border: 1px solid #ddd;
    color: #666;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.klav-wl-clear-all:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}

/* Wishlist items grid */
.klav-wl-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* Individual wishlist item card */
.klav-wl-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.klav-wl-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.klav-wl-item.klav-wl-removing {
    transform: scale(0.9);
    opacity: 0;
}

.klav-wl-item-image {
    position: relative;
    padding-top: 100%;
    background: #f9f9f9;
    overflow: hidden;
}

.klav-wl-item-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.klav-wl-item-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #999;
    font-size: 16px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.klav-wl-item-remove:hover {
    background: #e74c3c;
    color: #fff;
}

.klav-wl-item-content {
    padding: 15px;
}

.klav-wl-item-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.klav-wl-item-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.klav-wl-item-name a:hover {
    color: #e74c3c;
}

.klav-wl-item-price {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
}

.klav-wl-item-price del {
    color: #999;
    font-weight: 400;
    margin-right: 8px;
}

.klav-wl-item-price ins {
    text-decoration: none;
    color: #e74c3c;
}

.klav-wl-item-actions {
    display: flex;
    gap: 8px;
}

.klav-wl-add-to-cart {
    flex: 1;
    padding: 8px 16px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
}

.klav-wl-add-to-cart:hover {
    background: #e74c3c;
    color: #fff;
}

.klav-wl-item.out-of-stock .klav-wl-add-to-cart {
    background: #ccc;
    cursor: not-allowed;
    pointer-events: none;
}

.klav-wl-stock-status {
    font-size: 12px;
    margin-bottom: 8px;
}

.klav-wl-in-stock {
    color: #27ae60;
}

.klav-wl-out-of-stock {
    color: #e74c3c;
}

/* Empty wishlist state */
.klav-wl-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.klav-wl-empty-icon {
    display: inline-block;
    margin-bottom: 20px;
}

.klav-wl-empty-icon svg {
    width: 64px;
    height: 64px;
    stroke: #ccc;
    stroke-width: 1.5;
}

.klav-wl-empty p {
    font-size: 18px;
    margin: 0 0 20px 0;
}

.klav-wl-empty .button {
    display: inline-block;
    padding: 10px 24px;
    background: #333;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}

.klav-wl-empty .button:hover {
    background: #e74c3c;
}

/* ============================================
   WISHLIST COUNT IN NAV MENU
   ============================================ */

.klav-wl-menu-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    margin-left: 5px;
    line-height: 1;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .klav_wl_btn_wrapper a.button.klav-wl-toggle {
        width: 32px;
        height: 32px;
    }

    .klav-wl-icon svg {
        width: 14px;
        height: 14px;
    }

    .klav-wl-items {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
    }

    .klav-wl-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .klav-wl-toast {
        left: 20px;
        right: 20px;
        bottom: 10px;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .klav-wl-items {
        grid-template-columns: 1fr;
    }

    .klav_wl_btn_wrapper a.button.klav-wl-toggle {
        width: 28px;
        height: 28px;
    }

    .klav-wl-icon svg {
        width: 12px;
        height: 12px;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    .klav_wl_btn_wrapper a.button.klav-wl-toggle {
        background-color: rgba(50, 50, 50, 0.95);
        color: #eee;
    }

    .klav_wl_btn_wrapper a.button.klav-wl-toggle:hover {
        background-color: #e74c3c;
        color: #fff;
    }

    .klav-wl-item {
        background: #1a1a1a;
        border-color: #333;
    }

    .klav-wl-item-name,
    .klav-wl-item-name a {
        color: #eee;
    }

    .klav-wl-item-price {
        color: #eee;
    }
}