/* Wishlist modal/tooltip styles (frontend).
 * Extracted from render_wishlist_modals() in wishlist-modals.php.
 * Settings-driven values were dropped to their defaults; live theming still
 * flows through the --wl-* custom properties that the Elementor controls set
 * via their own selectors. Editor-only (.elementor-editor-active) and dead
 * {{WRAPPER}} rules are intentionally excluded. Enqueued via
 * render_wishlist_modal_css() / wiz_enqueue_product_card_styles(). */

.wishlist-tooltip-content {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Prevent transform and box-shadow from affecting modal positioning */
.product-item:hover {
    transform: none !important;
}

.product-item {
    transform: none !important;
}

/* Position the tooltip container correctly for heart icon */
.tooltip.wishlist-tooltip {
    position: absolute;
}

.wishlist-tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid var(--wl-border-color, #eaeaea);
    position: relative;
    padding: 12px 16px;
    background: var(--wl-tt-header-bg, transparent);
}

.wishlist-create-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid var(--wl-border-color, #eaeaea);
    position: relative;
    background: var(--wl-tt-header-bg, transparent);
    padding: 10px;
}

/* Modal styles using CSS custom properties for live updates */
.wishlist-create-modal-header {
    color: var(--wl-modal-header-text, #222) !important;
    background: var(--wl-modal-header-bg, transparent) !important;
    border-bottom: 1px solid var(--wl-modal-header-border, #eaeaea) !important;
}

.wishlist-create-close-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 26px;
    color: var(--wl-secondary-text-color, #888);
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
    transition: color 0.2s;
}

.wishlist-create-close-btn:hover {
    color: var(--wl-modal-primary-color, var(--primary));
}

/* Modal close button using CSS custom properties */
.wishlist-create-close-btn {
    color: var(--wl-modal-close-btn-color, #888) !important;
}

.wishlist-create-btn {
    font-size: 16px;
    cursor: pointer;
    color: var(--wl-create-btn-text-color, var(--primary));
    font-weight: 500;
}

.wishlist-list {
    max-height: 220px;
    overflow-y: auto;
    padding: var(--wl-tt-content-padding, 10px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--wl-tt-content-bg, transparent);
}

.wishlist-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Custom checkbox styling to match your design */
.wishlist-item input[type="checkbox"] {
    /* Hide the default checkbox */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: var(--wl-checkbox-size, 14px);
    align-self: start;
    height: var(--wl-checkbox-size, 14px);
    border: 2px solid var(--wl-checkbox-border-color, #ddd);
    background-color: white;
    cursor: pointer;
    position: relative;
    margin: 0;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.wishlist-item input[type="checkbox"]:hover {
    border-color: var(--primary);
}

.wishlist-item input[type="checkbox"]:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.wishlist-item input[type="checkbox"]:checked::after {
    content: "\2713";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
}

.wishlist-item label {
    flex: 1;
    margin-left: 0;
    font-size: 15px;
}

.wishlist-count {
    margin-left: auto;
    color: var(--wl-count-text-color, #666);
    font-size: 13px;
    font-weight: 400;
    min-width: 24px;
    text-align: right;
}

.wishlist-tooltip-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: var(--wl-tt-footer-padding, 8px 12px);
    border-top: 1px solid var(--wl-tt-footer-border, #ddd);
    background: var(--wl-tt-footer-bg, transparent);
}

.wishlist-create-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: var(--wl-modal-footer-bg, transparent) !important;
    border-top: 1px solid var(--wl-modal-footer-border, #ddd) !important;
    padding: 10px;
}

.wishlist-done-btn {
    padding: 8px 18px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
    background-color: var(--primary);
    color: var(--primary-text);
}

.wishlist-create-done-btn {
    background: var(--primary);
    color: var(--primary-text);
    padding: 8px 18px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}

.wishlist-done-btn:disabled,
.wishlist-create-done-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.wishlist-done-btn.loading,
.wishlist-create-done-btn.loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
    padding-right: 34px;
}

.wishlist-done-btn.loading::after,
.wishlist-create-done-btn.loading::after {
    content: "";
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -10px;
    isolation: isolate;
    will-change: transform;
    transform: translateZ(0);
    animation: wishlist-spin-loader 1s linear infinite;
}

@keyframes wishlist-spin-loader {
    0% {
        transform: translateZ(0) rotate(0deg);
    }

    100% {
        transform: translateZ(0) rotate(360deg);
    }
}

.wishlist-create-cancel-btn {
    background: white;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 8px 18px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.wishlist-done-btn {
    width: 100%;
}

.wishlist-create-modal-body {
    background: var(--wl-modal-body-bg, transparent) !important;
    border: var(--wl-modal-body-border, none) !important;
    padding: 15px 10px 15px 10px;
}

.wishlist-create-modal-body input {
    width: 100%;
    padding: 8px;
    font-size: 16px;
    border: 1.5px solid #e0e0e0;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.wishlist-create-modal-body input:focus {
    border-color: var(--wl-modal-input-focus, #000000) !important;
    outline: none;
}

/* Heart icon (shared) */
.wishlist-icon-circle {
    position: absolute;
    top: 4px;
    right: 8px;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
}

.wishlist-heart-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.wishlist-icon-circle .wishlist-heart-svg svg path {
    fill: #00000000;
    stroke: #000;
    stroke-width: 1.5;
    transition: fill 0.2s, stroke 0.2s;
}

.wishlist-icon-circle.active .wishlist-heart-svg svg path {
    fill: #e74c3c;
    stroke: none;
}

/* Notification modals */
.wishlist-notification-modal {
    position: fixed;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 10001;
    width: 250px;
    height: 90px;
    pointer-events: auto;
}

.wishlist-notification-content {
    display: flex;
    flex-direction: column;
    padding: 0;
    height: 100%;
    justify-content: center;
}

.wishlist-notification-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
}

.wishlist-notification-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wishlist-notification-text {
    font-size: 14px;
    color: #222222;
    line-height: 1.4;
}

.wishlist-notification-message {
    font-weight: 500;
}

.wishlist-notification-name {
    font-weight: 600;
}

.wishlist-notification-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 0;
    width: 100%;
}

.wishlist-notification-change-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    color: #222222;
    font-size: 14px;
    transition: background-color 0.2s;
    width: 100%;
}

.wishlist-notification-change-btn:hover {
    background-color: #f5f5f5;
}

.wishlist-notification-change-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.wishlist-notification-change-btn span {
    font-weight: 500;
}