/* =============================================
   TK Wishlist — styles
   ============================================= */

/* Heart button on product cards */
li.product { position: relative; }

.tk-wl-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0;
    transition: transform .15s, background .15s, box-shadow .15s;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.tk-wl-btn svg {
    fill: none;
    stroke: #6b7280;
    stroke-width: 2;
    transition: fill .15s, stroke .15s;
}

.tk-wl-btn:hover {
    background: #fff;
    transform: scale(1.12);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.tk-wl-btn:hover svg,
.tk-wl-btn.tk-wl-active svg {
    fill: #e63946;
    stroke: #e63946;
}

.tk-wl-btn.tk-wl-active {
    background: #fff5f5;
}

/* Single product version */
.tk-wl-single-wrap { margin: 8px 0 4px; }

.tk-wl-btn-text {
    position: static;
    width: auto;
    height: auto;
    border-radius: 6px;
    padding: 9px 18px;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    color: #374151;
    box-shadow: none;
    transform: none;
}

.tk-wl-btn-text:hover,
.tk-wl-btn-text.tk-wl-active {
    background: #fff5f5;
    border-color: #e63946;
    color: #e63946;
    transform: none !important;
}

/* FAB (floating action button) */
#tk-wl-fab {
    position: fixed;
    bottom: 24px;
    right: 16px;
    width: 52px;
    height: 52px;
    background: #1e293b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9990;
    box-shadow: 0 4px 16px rgba(0,0,0,.28);
    text-decoration: none;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    transform: scale(.7);
}

#tk-wl-fab.visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

#tk-wl-fab svg {
    fill: #fff;
    stroke: none;
}

#tk-wl-fab-count {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #e63946;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* Toast */
#tk-wl-toast {
    position: fixed;
    bottom: 90px;
    right: 16px;
    background: #1e293b;
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: .875rem;
    z-index: 10001;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    max-width: 220px;
    white-space: nowrap;
}

#tk-wl-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   Wishlist page
   ============================================= */
#tk-wl-page { min-height: 260px; }

.tk-wl-loading {
    text-align: center;
    padding: 60px 0;
    color: #9ca3af;
    font-size: .95rem;
}

.tk-wl-empty {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

.tk-wl-empty svg { display: block; margin: 0 auto 16px; }
.tk-wl-empty p   { font-size: 1rem; margin-bottom: 20px; }

.tk-wl-cta {
    display: inline-block;
    background: #0d1b2a;
    color: #fff;
    padding: 10px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-size: .875rem;
    transition: opacity .15s;
}
.tk-wl-cta:hover { opacity: .82; color: #fff; }

/* Grid */
.tk-wl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

@media (max-width: 768px) { .tk-wl-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 480px) { .tk-wl-grid { grid-template-columns: 1fr; } }

/* Card */
.tk-wl-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    position: relative;
    transition: box-shadow .2s;
}

.tk-wl-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); }

.tk-wl-remove {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 26px;
    height: 26px;
    background: rgba(255,255,255,.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    padding: 0;
    transition: background .15s, color .15s;
    color: #6b7280;
}

.tk-wl-remove svg { stroke: currentColor; stroke-width: 2.5; fill: none; }
.tk-wl-remove:hover { background: #e63946; color: #fff; }

.tk-wl-card-img {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f9fafb;
}

.tk-wl-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.tk-wl-card:hover .tk-wl-card-img img { transform: scale(1.04); }

.tk-wl-card-body { padding: 12px; }

.tk-wl-card-name {
    display: block;
    font-weight: 600;
    font-size: .88rem;
    color: #0d1b2a;
    text-decoration: none;
    margin-bottom: 6px;
    line-height: 1.35;
}
.tk-wl-card-name:hover { color: #e63946; }

.tk-wl-card-price {
    font-size: .95rem;
    font-weight: 700;
    color: #0d1b2a;
    margin-bottom: 10px;
}
.tk-wl-card-price del { font-weight: 400; color: #9ca3af; font-size: .8rem; margin-right: 4px; }
.tk-wl-card-price ins { text-decoration: none; color: #e63946; }

.tk-wl-card-btn {
    display: block;
    text-align: center;
    background: #0d1b2a;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    padding: 8px;
    font-size: .82rem;
    transition: opacity .15s;
}
.tk-wl-card-btn:hover { opacity: .82; color: #fff; }

/* Share section */
.tk-wl-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0 40px;
}

.tk-wl-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    color: #374151;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .875rem;
    transition: border-color .15s, color .15s;
    align-self: flex-start;
}
.tk-wl-share-btn:hover { border-color: #0d1b2a; color: #0d1b2a; }

.tk-wl-share-box {
    display: flex;
    gap: 8px;
    max-width: 520px;
}

.tk-wl-share-box input {
    flex: 1;
    border: 1.5px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: .82rem;
    color: #374151;
    background: #f9fafb;
    min-width: 0;
}

.tk-wl-copy-btn {
    background: #0d1b2a;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    cursor: pointer;
    font-size: .82rem;
    white-space: nowrap;
    transition: opacity .15s;
}
.tk-wl-copy-btn:hover  { opacity: .82; }
.tk-wl-copy-btn.copied { background: #16a34a; }

.tk-wl-share-hint {
    font-size: .78rem;
    color: #9ca3af;
    margin: 0;
}

/* Shared view */
.tk-wl-shared-banner {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 24px;
    font-size: .875rem;
    color: #7f1d1d;
}

.tk-wl-expired {
    text-align: center;
    padding: 48px 20px;
    color: #6b7280;
}