/* ============================================================
   AYURCALL — wishlist.css
   Heart button (on all product cards) + wishlist page grid.
   ============================================================ */

/* ── Heart button — floats over product card ── */
.btn-heart {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 32px; height: 32px;
    border-radius: var(--radius-full);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
    /* No `color` in the transition: the active state is server-rendered, so colour is
       correct at first paint; transitioning it would let any late style/webfont reflow
       animate a visible red fade-in on load. Hover colour still changes (instantly). */
    transition: transform 0.15s ease;
    z-index: var(--z-base);
    flex-shrink: 0;
}
.btn-heart:hover             { color: #E53E3E; transform: scale(1.1); }
/* Active state — colour only; JS swaps icon class ti-heart ↔ ti-heart-filled */
.btn-heart.btn-heart--active { color: #E53E3E; }
/* The bundled Tabler (free) has no filled heart glyph, so we render a SOLID heart
   via a CSS mask of an inline SVG. The .ti-heart <i> stays in the markup; we hide
   its font glyph and fill the masked shape with background-color instead.
   Grey when inactive, red (#E53E3E) when .btn-heart--active. */
.btn-heart i {
    width: 17px; height: 17px;
    pointer-events: none;
    background-color: var(--color-text-muted);
    -webkit-mask: var(--heart-mask) center / contain no-repeat;
            mask: var(--heart-mask) center / contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
    --heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}
.btn-heart i::before { content: none; }                 /* hide the outline font glyph */
.btn-heart:hover i             { background-color: #E53E3E; }
.btn-heart.btn-heart--active i { background-color: #E53E3E; }

/* ── Wishlist page grid ── */
.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.wl-card {
    position: relative;
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: border-color var(--transition);
}
.wl-card:hover           { border-color: #B8D8D7; }
.wl-card--oos            { background: var(--color-bg); opacity: 0.85; }

.wl-oos-badge,
.wl-discount-badge {
    position: absolute;
    top: var(--space-2); left: var(--space-2);
    font-size: var(--font-size-micro); font-weight: 600;
    border-radius: var(--radius-full);
    padding: 2px 8px;
}
.wl-oos-badge      { background: #FEF2F2; color: #DC2626; }
.wl-discount-badge { background: var(--color-primary-light); color: var(--color-primary); }

.wl-remove-btn {
    position: absolute;
    top: var(--space-2); right: var(--space-2);
    width: 28px; height: 28px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.9);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #E53E3E;
    transition: background var(--transition), transform 0.15s ease;
}
.wl-remove-btn:hover { background: #FEF2F2; transform: scale(1.1); }
.wl-remove-btn i     { font-size: 15px; }

.wl-card__img-link {
    display: flex; justify-content: center;
    margin-top: var(--space-3);
}
.wl-card__img-link img {
    width: 100px; height: 100px;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.wl-card__body          { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.wl-card__brand         { font-size: var(--font-size-micro); font-weight: 600;
                           text-transform: uppercase; letter-spacing: 0.5px;
                           color: var(--color-text-muted); }
.wl-card__name          { font-size: var(--font-size-small); font-weight: 500;
                           color: var(--color-text-primary); text-decoration: none;
                           line-height: 1.4; }
.wl-card__name:hover    { color: var(--color-primary); }

.wl-card__price         { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; }
.wl-card__sale          { font-size: var(--font-size-body); font-weight: 600;
                           color: var(--color-text-primary); }
.wl-card__mrp           { font-size: var(--font-size-small); color: var(--color-text-muted);
                           text-decoration: line-through; }
.wl-card__oos-text      { font-size: var(--font-size-small); color: var(--color-text-muted);
                           font-style: italic; }

.wl-card__actions       { margin-top: auto; padding-top: var(--space-2); }
.wl-atc-btn             { width: 100%; }

/* ── Notify me button ── */
.btn--notify {
    display: inline-flex; align-items: center; gap: 6px;
    width: 100%;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 8px 14px;
    font-size: var(--font-size-small); font-weight: 500;
    font-family: var(--font-family);
    background: var(--color-surface); color: var(--color-text-secondary);
    cursor: pointer; justify-content: center;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}
/* .btn--notify hover effect removed (UAT) — button stays visually static on hover. */
.btn--notify--active { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); }
.btn--notify i { font-size: 15px; }

@media (max-width: 768px) {
    .wishlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .wishlist-grid { grid-template-columns: 1fr; }
}