/* ════════════════════════════════════════════
   WC Favorites – Styles v1.3
   Elementor + WooCommerce compatible
   ════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   Heart Button on Single Product Page
   ───────────────────────────────────────────── */

.wcf-favorite-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 2px solid #cccccc !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
    color: #999999 !important;
    transition: all 0.2s ease !important;
    vertical-align: middle !important;
    margin: 0px 10px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    outline: none !important;
    position: relative !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-size: 0 !important;
}

.wcf-favorite-btn:hover {
    color: #e2264d !important;
    border-color: #e2264d !important;
    background: transparent !important;
}

.wcf-favorite-btn:focus {
    outline: none !important;
    outline-offset: 0 !important;
}

/* Pending state - beating animation while AJAX is processing */
.wcf-favorite-btn.wcf-pending .wcf-heart-icon {
    animation: wcf-beat 1s ease-in-out infinite !important;
}

@keyframes wcf-beat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Heart SVG icon */
.wcf-favorite-btn .wcf-heart-icon {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transition: fill 0.2s ease, transform 0.3s ease !important;
    flex-shrink: 0 !important;
}

/* Active / Favorited state */
.wcf-favorite-btn.wcf-active {
    color: #e2264d !important;
    border-color: #e2264d !important;
    background: rgba(226, 38, 77, 0.05) !important;
}

.wcf-favorite-btn.wcf-active .wcf-heart-icon {
    fill: #e2264d !important;
}

/* Pop animation */
.wcf-favorite-btn.wcf-animating .wcf-heart-icon {
    animation: wcf-pop 0.4s ease !important;
}

@keyframes wcf-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.3); }
    60%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}


/* No overrides on Elementor or WooCommerce containers.
   The JS moves the button inside .e-atc-qty-button-holder automatically. */


/* ─────────────────────────────────────────────
   Favorites Table (Shopping List style)
   ───────────────────────────────────────────── */

.wcf-favorites-wrapper {
    width: 100% !important;
    margin: 0 auto !important;
}

/* ─── Add by SKU Input ─── */

.wcf-add-by-sku {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin-bottom: 16px !important;
}

.wcf-sku-input {
    flex: 1 !important;
    max-width: 400px !important;
    padding: 10px 14px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease !important;
}

.wcf-sku-input:focus {
    outline: none !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

.wcf-sku-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 20px !important;
    background: #2563eb !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.2s ease !important;
}

.wcf-sku-add-btn:hover {
    background: #1d4ed8 !important;
}

.wcf-sku-add-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.wcf-sku-add-btn svg {
    flex-shrink: 0 !important;
}

/* ─── Bulk Actions Footer ─── */

.wcf-bulk-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    margin-top: 16px !important;
}

.wcf-bulk-left {
    display: flex !important;
    align-items: center !important;
}

.wcf-selected-count {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

.wcf-bulk-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.wcf-bulk-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 18px !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.wcf-bulk-btn svg {
    flex-shrink: 0 !important;
}

.wcf-bulk-add-to-cart {
    background: #2563eb !important;
    color: #fff !important;
}

.wcf-bulk-add-to-cart:hover:not(:disabled) {
    background: #1d4ed8 !important;
}

.wcf-bulk-remove {
    background: #dc2626 !important;
    color: #fff !important;
}

.wcf-bulk-remove:hover:not(:disabled) {
    background: #b91c1c !important;
}

.wcf-bulk-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

.wcf-bulk-btn.wcf-loading {
    opacity: 0.7 !important;
    cursor: wait !important;
}

.wcf-favorites-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid #e0e0e0 !important;
    background: #fff !important;
    font-size: 14px !important;
}

/* Header */
.wcf-favorites-table thead tr {
    background: #4a5568 !important;
    color: #fff !important;
}

.wcf-favorites-table thead th {
    padding: 12px 16px !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    border: none !important;
}

/* Body rows */
.wcf-favorites-table tbody tr {
    border-bottom: 1px solid #e8e8e8 !important;
    transition: opacity 0.3s ease, background 0.15s ease !important;
}

.wcf-favorites-table tbody tr:hover {
    background: #f9fafb !important;
}

.wcf-favorites-table tbody tr.wcf-removing {
    opacity: 0 !important;
}

.wcf-favorites-table tbody td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    border: none !important;
}

/* Column widths */
.wcf-col-checkbox { width: 5% !important; text-align: center !important; }
.wcf-col-sku   { width: 12% !important; }
.wcf-col-image { width: 10% !important; }
.wcf-col-name  { width: auto !important; }
.wcf-col-price { width: 12% !important; }
.wcf-col-qty   { width: 8% !important; }
.wcf-col-action { width: 20% !important; }

/* SKU */
.wcf-col-sku {
    font-family: monospace !important;
    font-size: 13px !important;
    /* color: #555; */   /* fix issue with the th */
}

/* Checkbox */
.wcf-col-checkbox input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.wcf-select-all {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

.wcf-na { color: #ccc !important; }

/* Image */
.wcf-col-image img {
    width: 50px !important;
    height: 50px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    display: block !important;
}

.wcf-col-image a { display: block !important; line-height: 0 !important; }

/* Product name */
.wcf-col-name a {
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.wcf-col-name a:hover {
    color: #0073aa !important;
    text-decoration: underline !important;
}

.wcf-variation-info {
    color: #888 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* Price */
.wcf-col-price {
    font-weight: 600 !important;
    /* color: #333; */ /* fix issue with the th */
    white-space: nowrap !important;
}

.wcf-col-price del { color: #999 !important; font-weight: 400 !important; }
.wcf-col-price ins { text-decoration: none !important; }

/* Quantity input */
.wcf-qty-input {
    width: 60px !important;
    padding: 6px 8px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    text-align: center !important;
    font-size: 14px !important;
    -moz-appearance: textfield !important;
}

.wcf-qty-input::-webkit-inner-spin-button,
.wcf-qty-input::-webkit-outer-spin-button {
    opacity: 1 !important;
}

.wcf-qty-input:focus {
    border-color: #0073aa !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #0073aa !important;
}

/* Action buttons */
.wcf-action-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.wcf-btn-add-to-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: #2563eb !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.2s ease, transform 0.1s ease !important;
}

.wcf-btn-add-to-cart svg {
    flex-shrink: 0 !important;
}

.wcf-btn-add-to-cart:hover { background: #1d4ed8 !important; }
.wcf-btn-add-to-cart:active { transform: scale(0.97) !important; }
.wcf-btn-add-to-cart:disabled,
.wcf-btn-add-to-cart.wcf-loading { opacity: 0.6 !important; cursor: not-allowed !important; }

.wcf-btn-add-to-cart.wcf-added {
    background: #16a34a !important;
}

.wcf-out-of-stock {
    color: #dc2626 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* Remove button (trash icon) */
.wcf-btn-remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    color: #9ca3af !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

.wcf-btn-remove:hover {
    color: #dc2626 !important;
    border-color: #fecaca !important;
    background: #fef2f2 !important;
}

/* ─── Toolbar (count + per-page selector) ─── */

.wcf-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 0 !important;
    font-size: 13px !important;
    color: #6b7280 !important;
}

.wcf-item-count {
    font-weight: 500 !important;
}

.wcf-per-page {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.wcf-per-page label {
    font-weight: 500 !important;
    color: #6b7280 !important;
    margin-right: 2px !important;
}

.wcf-pp-option {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 30px !important;
    padding: 0 8px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.wcf-pp-option:hover {
    border-color: #2563eb !important;
    color: #2563eb !important;
    background: #eff6ff !important;
}

.wcf-pp-option.wcf-pp-active {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
}

/* ─── Pagination ─── */

.wcf-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 20px 0 8px !important;
}

.wcf-page-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.wcf-page-btn:hover {
    border-color: #2563eb !important;
    color: #2563eb !important;
    background: #eff6ff !important;
}

.wcf-page-btn.wcf-page-current {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
    pointer-events: none !important;
}

.wcf-page-prev,
.wcf-page-next {
    font-weight: 600 !important;
}

.wcf-page-ellipsis {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    color: #9ca3af !important;
    font-size: 14px !important;
}

/* ─── Empty State ─── */

.wcf-empty-state {
    text-align: center !important;
    padding: 48px 20px !important;
}

.wcf-empty-state svg {
    margin-bottom: 16px !important;
}

.wcf-empty-state p {
    font-size: 16px !important;
    color: #6b7280 !important;
    margin: 0 0 20px !important;
}

.wcf-browse-btn {
    display: inline-block !important;
    padding: 10px 24px !important;
    background: #2563eb !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
}

.wcf-browse-btn:hover {
    background: #1d4ed8 !important;
    color: #fff !important;
}

.wcf-empty-row td {
    text-align: center !important;
    padding: 0 !important;
    border: none !important;
}

/* ─── Login Notice ─── */

.wcf-login-notice {
    text-align: center !important;
    padding: 40px 20px !important;
    font-size: 16px !important;
}

.wcf-login-notice a { color: #2563eb !important; font-weight: 600 !important; }

/* ─── Count Badge ─── */

.wcf-favorites-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #e2264d !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 9px !important;
    padding: 0 5px !important;
    line-height: 1 !important;
}

/* ─── Toast ─── */

.wcf-toast {
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(20px) !important;
    background: #1e293b !important;
    color: #fff !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    z-index: 99999 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.wcf-toast.wcf-toast-visible {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

.wcf-toast.wcf-toast-error { background: #dc2626 !important; }

/* ─────────────────────────────────────────────
   Cart Page – Heart Button
   ───────────────────────────────────────────── */

.wcf-cart-fav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px !important;
    margin: 0 !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    color: #c0c0c0 !important;
    transition: color 0.2s ease !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
}

.wcf-cart-fav-btn:hover {
    color: #e2264d !important;
}

.wcf-cart-fav-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.wcf-cart-fav-btn .wcf-heart-icon {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transition: fill 0.2s ease, transform 0.3s ease !important;
    flex-shrink: 0 !important;
}

/* Active / Favorited */
.wcf-cart-fav-btn.wcf-active {
    color: #e2264d !important;
}

.wcf-cart-fav-btn.wcf-active .wcf-heart-icon {
    fill: #e2264d !important;
}

/* Pop animation */
.wcf-cart-fav-btn.wcf-animating .wcf-heart-icon {
    animation: wcf-pop 0.4s ease !important;
}

/* Layout: heart + × stacked vertically in the remove cell */
td.product-remove {
    text-align: center !important;
}

td.product-remove .wcf-cart-fav-btn {
    display: block !important;
    margin: 0 auto 4px auto !important;
}

/* ─── Responsive ─── */

@media (max-width: 768px) {
    .wcf-toolbar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .wcf-add-by-sku {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .wcf-sku-input {
        max-width: 100% !important;
    }

    .wcf-bulk-actions {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .wcf-bulk-right {
        width: 100% !important;
        justify-content: stretch !important;
    }

    .wcf-bulk-btn {
        flex: 1 !important;
    }

    .wcf-favorites-table thead { display: none !important; }

    .wcf-favorites-table tbody tr {
        display: block !important;
        padding: 16px !important;
        margin-bottom: 8px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
    }

    .wcf-favorites-table tbody td {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 6px 0 !important;
        border: none !important;
    }

    .wcf-favorites-table tbody td::before {
        content: attr(data-title) !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        text-transform: uppercase !important;
        color: #6b7280 !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
    }

    .wcf-col-checkbox::before {
        content: '' !important;
        margin-right: 0 !important;
    }

    .wcf-col-image { justify-content: center !important; }
    .wcf-col-image::before { display: none !important; }

    .wcf-action-buttons { flex-wrap: wrap !important; }

    .wcf-favorite-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        margin: 0px 10px !important;
    }

    .wcf-pagination {
        flex-wrap: wrap !important;
    }
}