/* =============================================================
   wishlist.css  –  header icon (global) + wishlist page
   ============================================================= */

/* ---- Header icon ---- */
.vt-wl-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 44px;
    height: 44px;
    color: #1d3142;
    text-decoration: none;
    transition: color .15s;
    flex-shrink: 0;
}
.vt-wl-icon:hover { color: #e53935; }
.vt-wl-icon svg { display: block; }

.vt-wl-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 6px;
    background: #1560bd;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
    transition: transform .2s, opacity .2s;
    transform-origin: center;
}
.vt-wl-badge--hidden {
    opacity: 0;
    transform: scale(.6);
}

/* ---- Wishlist page header ---- */
.vt-wl-page-header {
    padding: 24px 0 20px;
    border-bottom: 1px solid var(--vt-border, #cdd3d8);
    margin-bottom: 28px;
}

.vt-wl-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--vt-dark, #1d3142);
    margin: 0;
}

/* ---- Page body ---- */
.vt-wl-body {
    padding: 0 0 48px;
}

/* ---- Loading spinner ---- */
#vt-wl-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
}

.vt-wl-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #cdd3d8;
    border-top-color: #1560bd;
    border-radius: 50%;
    animation: vt-spin .7s linear infinite;
}

@keyframes vt-spin {
    to { transform: rotate(360deg); }
}

/* ---- Empty state ---- */
#vt-wl-empty {
    text-align: center;
    padding: 80px 0;
}

.vt-wl-empty-icon {
    display: block;
    margin: 0 auto 20px;
}

.vt-wl-empty-title {
    font-size: 20px;
    font-weight: 700;
    color: #1d3142;
    margin: 0 0 10px;
}

.vt-wl-empty-text {
    font-size: 15px;
    color: #666;
    margin: 0 0 28px;
}

/* Reuse the existing .vt-btn--primary style if it exists; fallback: */
.vt-wl-empty a.vt-btn,
a.vt-btn.vt-btn--primary {
    display: inline-block;
    background: #1560bd;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 26px;
    border-radius: 4px;
    text-decoration: none;
    transition: background .15s;
}
a.vt-btn.vt-btn--primary:hover { background: #0e4fa0; color: #fff; }

/* ---- Card remove animation ---- */
.vt-card--removing {
    opacity: 0;
    transform: scale(.95);
    transition: opacity .3s, transform .3s;
    pointer-events: none;
}