/* phase29: Wishlist + Sold + OTP modal */

/* Wishlist heart icon trên card */
.product-card { position: relative; }
.card-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 2;
    transition: transform 0.2s, background 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.card-wishlist:hover { transform: scale(1.1); background: #fff; }
.card-wishlist:active { transform: scale(0.95); }
.card-wishlist .heart-empty { color: #94a3b8; }
.card-wishlist .heart-filled { color: #ef4444; display: none; }
.card-wishlist.liked .heart-empty { display: none; }
.card-wishlist.liked .heart-filled { display: inline; }
.card-wishlist.liked { background: #fee2e2; }

/* Heart bounce animation */
@keyframes heartBounce {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(0.9); }
}
.card-wishlist.bouncing { animation: heartBounce 0.5s; }

/* Sold count - "Đã bán" badge */
.card-sold {
    color: #64748b;
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.card-sold strong { color: #dc2626; }

/* OTP Modal */
.otp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.otp-modal-overlay.show { display: flex; }
.otp-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    padding: 24px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}
.otp-modal h3 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #1e293b;
}
.otp-modal p {
    margin: 0 0 16px;
    color: #64748b;
    font-size: 14px;
}
.otp-modal input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    margin-bottom: 12px;
}
.otp-modal input:focus { outline: 2px solid #8b5cf6; border-color: #8b5cf6; }
.otp-modal .otp-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.otp-modal button {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.otp-modal .btn-primary { background: #8b5cf6; color: #fff; }
.otp-modal .btn-primary:hover { background: #7c3aed; }
.otp-modal .btn-secondary { background: #e2e8f0; color: #475569; }
.otp-modal .otp-error { 
    color: #dc2626; font-size: 13px; margin: 8px 0; 
    background: #fef2f2; padding: 8px 10px; border-radius: 6px;
    display: none;
}
.otp-modal .otp-error.show { display: block; }
.otp-modal .otp-info {
    color: #16a34a; font-size: 13px; margin: 8px 0;
    background: #f0fdf4; padding: 8px 10px; border-radius: 6px;
    display: none;
}
.otp-modal .otp-info.show { display: block; }

/* Toast notification */
.wish-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1e293b;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s;
}
.wish-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* phase70b: Video — ô thumb + popup */
[x-cloak]{display:none!important}
.pd-thumb-video{position:relative;cursor:pointer;overflow:hidden}
.pd-thumb-video img{width:100%;height:100%;object-fit:cover;filter:brightness(0.55)}
.pd-thumb-video::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.15);z-index:1}
.pd-thumb-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);z-index:2;color:#fff;font-size:1.05rem;background:rgba(220,38,38,0.92);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding-left:2px;box-shadow:0 1px 4px rgba(0,0,0,0.4)}
.pd-thumb-vlabel{position:absolute;bottom:2px;left:0;right:0;z-index:2;text-align:center;color:#fff;font-size:0.6rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,0.9)}
.pd-video-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;padding:1rem}
.pd-video-modal-inner{position:relative;width:100%;max-width:420px}
.pd-video-close{position:absolute;top:-44px;right:0;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,0.2);color:#fff;font-size:1.2rem;cursor:pointer;z-index:2}
.pd-video-modal-body{width:100%;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#000}
.pd-video-modal-body iframe{width:100%;height:100%;border:0;display:block}
@media(min-width:768px){.pd-video-modal-inner{max-width:380px}}