/*==============================
Customer wishlist + saved comparisons (Phase 2b)
Heart buttons, header count, /wishlist/ + /account/ sections, compare-save form.
Sits alongside compare.css and account.css.
=================================*/

.dsc-hidden { display: none !important; }

/* ---- Heart buttons: card icon (inside .prod-btn-group next to compare; the theme
   already stacks the circular icons and animates them in on hover) ---- */
.dsc-wish-btn i { transition: color .2s ease, transform .2s ease; }
.dsc-wish-btn.dsc-active i { color: var(--ts-brand, #d25b5b); }
.dsc-wish-btn:hover i { transform: scale(1.12); }

/* Detail-page text button: outline, matching the compare button */
a.btn.dsc-wish-btn {
    background-color: transparent;
    border: 1px solid #262626;
    color: #262626;
    margin-left: 8px;
}
a.btn.dsc-wish-btn:hover { background-color: #262626; color: #fff; }
a.btn.dsc-wish-btn.dsc-active { border-color: var(--ts-brand, #d25b5b); color: var(--ts-brand, #d25b5b); }
a.btn.dsc-wish-btn i { margin-right: 6px; color: inherit; }
@media (max-width: 575.98px) { a.btn.dsc-wish-btn { margin-left: 0; margin-top: 8px; } }

/* ---- Header heart with count (sits before the account link) ---- */
#header-area .header-wish-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px 6px;
    margin-right: 10px;
    text-decoration: none;
    line-height: 1;
}
#header-area .header-wish-link i { font-size: 19px; line-height: 1; }
.header-v2 .header-wish-link { color: var(--ts-header-link, #374151) !important; }
.header-v2 .header-wish-link:hover { color: var(--ts-header-link-hover, #d63434) !important; }
.header-v5 .header-wish-link { color: var(--ts-header-link, #F5F3EC) !important; }
.header-v5 .header-wish-link:hover { color: var(--ts-header-link-hover, #ffffff) !important; }
.header-v5 .header-wish-link i { color: #E8611C; }
.dsc-wish-count {
    position: absolute;
    top: 0;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--ts-brand, #d25b5b);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0;
}
.dsc-wish-count:empty { display: none; }

/* ---- Toast ---- */
#dsc-toast {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1050;
    max-width: min(420px, calc(100vw - 40px));
    background: #262626;
    color: #fff;
    border-radius: 6px;
    padding: 14px 18px;
    font-size: 1.35rem;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
#dsc-toast.dsc-toast-show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#dsc-toast a { color: #fff; text-decoration: underline; margin-left: 10px; font-weight: 600; white-space: nowrap; }
body.dsc-tray-open #dsc-toast { bottom: 96px; } /* clear the compare tray */

/* ---- /wishlist/ page + account wishlist grid ---- */
.dsc-wish-page { margin-top: 40px; margin-bottom: 80px; }
.dsc-wish-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 1.4rem;
    color: #555;
}
.dsc-wish-toolbar a { color: #262626; text-decoration: underline; }
.dsc-wish-card { position: relative; }
.dsc-wish-card .dsc-wish-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .92);
    color: #262626;
    font-size: 15px;
    line-height: 30px;
    text-align: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    transition: background .2s ease, color .2s ease;
}
.dsc-wish-card .dsc-wish-remove:hover { background: #e74c3c; color: #fff; }
.dsc-wish-empty {
    background: #fff;
    border: 1px solid #e6e4dc;
    border-radius: 6px;
    padding: 50px 30px;
    text-align: center;
}
.dsc-wish-empty .dsc-empty-icon { display: block; font-size: 42px; color: var(--ts-brand, #d25b5b); margin-bottom: 14px; }
.dsc-wish-empty h3 { font-size: 2.2rem; margin-bottom: 10px; }
.dsc-wish-empty p { font-size: 1.4rem; color: #666; line-height: 1.7; margin-bottom: 22px; }

/* Compact grid inside the account page */
#dsc-account-wishlist .single-product-wrap { margin-bottom: 20px; }
#dsc-account-wishlist .product-name { font-size: 1.4rem; }

/* ---- Saved comparisons (account page) ---- */
.dsc-compare-set {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #ececec;
    font-size: 1.4rem;
}
.dsc-compare-set:last-child { border-bottom: 0; }
.dsc-compare-set .set-thumbs { display: flex; gap: 4px; flex: 0 0 auto; }
.dsc-compare-set .set-thumbs img { width: 38px; height: 48px; object-fit: cover; border-radius: 3px; background: #f1f1f1; }
.dsc-compare-set .set-main { flex: 1 1 auto; min-width: 0; }
.dsc-compare-set .set-name { display: block; font-weight: 600; color: #262626; text-decoration: none; }
.dsc-compare-set .set-name:hover { text-decoration: underline; }
.dsc-compare-set .set-meta { display: block; font-size: 1.2rem; color: #8d8d8d; margin-top: 3px; }
.dsc-compare-set .set-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.dsc-compare-set .set-actions .btn { padding: 9px 16px; font-size: 1.2rem; }
.dsc-compare-set-delete {
    border: 0;
    background: transparent;
    color: #8d8d8d;
    font-size: 1.2rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0 4px;
}
.dsc-compare-set-delete:hover { color: #e74c3c; }
.dsc-compare-sets-empty { font-size: 1.4rem; color: #666; line-height: 1.7; }
.dsc-compare-sets-empty a { color: #262626; text-decoration: underline; }

/* ---- /compare/ toolbar: save form on the left, diff toggle on the right ---- */
.dsc-compare-tools { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.dsc-compare-save-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dsc-compare-save-form input[type="text"] {
    height: 40px;
    min-width: 280px;
    padding: 0 14px;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    font-size: 1.3rem;
    background: #fff;
}
.dsc-compare-save-form input[type="text"]:focus { border-color: #262626; outline: none; }
.dsc-compare-save-form .btn { height: 40px; padding: 0 18px; font-size: 1.2rem; line-height: 40px; }
.dsc-compare-save-login, .dsc-compare-saved { font-size: 1.3rem; color: #262626; }
.dsc-compare-save-login i, .dsc-compare-saved i { margin-right: 6px; color: var(--ts-brand, #d25b5b); }
.dsc-compare-save-login { text-decoration: underline; }
.dsc-compare-saved a { margin-left: 4px; text-decoration: underline; color: #262626; }
@media (max-width: 575.98px) { .dsc-compare-save-form input[type="text"] { min-width: 0; width: 100%; } }

/* ---- Showcase hero (dark band on template 005's showcase product layout):
   the outline Compare / Wishlist buttons must be light there, matching .showcase-btn-details ---- */
.showcase-hero a.btn.dsc-compare-btn,
.showcase-hero a.btn.dsc-wish-btn {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}
.showcase-hero a.btn.dsc-compare-btn:hover,
.showcase-hero a.btn.dsc-wish-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #fff;
    color: #fff;
}
.showcase-hero a.btn.dsc-compare-btn.dsc-active,
.showcase-hero a.btn.dsc-wish-btn.dsc-active {
    border-color: var(--ts-brand, #E8611C);
    color: var(--ts-brand, #E8611C);
}