/* ==========================================
   ULTRAKIT INSTAGRAM SHOPPING — Premium
   Shoppable Hotspots × 3 Dot Styles × 2 Skins
   ========================================== */

.ultrakit-igs-wrapper { --ultrakit-igs-accent: #ffffff; width: 100%; }
.ultrakit-igs-empty { text-align: center; color: #aaa; padding: 30px; border: 1.5px dashed #ddd; border-radius: 10px; }

.ultrakit-igs-image-wrap { position: relative; width: 100%; border-radius: 14px; overflow: hidden; }
.ultrakit-igs-image { width: 100%; display: block; }

.ultrakit-igs-hotspot { position: absolute; transform: translate(-50%, -50%); z-index: 2; }

.ultrakit-igs-dot {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--ultrakit-igs-accent);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0 !important;
    box-sizing: border-box;
    color: #1a1a2e !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    position: relative;
    transition: transform 0.2s ease;
}
.ultrakit-igs-dot:hover { transform: scale(1.1); }

.ultrakit-igs-dot-pulse::before {
    content: '';
    position: absolute; inset: -6px;
    border-radius: 50%;
    background: var(--ultrakit-igs-accent);
    opacity: 0.5;
    animation: ultrakit-igs-pulse 1.8s ease-out infinite;
}
@keyframes ultrakit-igs-pulse {
    0%   { transform: scale(0.7); opacity: 0.5; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* ---- Popup card ---- */
.ultrakit-igs-popup {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 200px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 5;
}
.ultrakit-igs-hotspot.is-open .ultrakit-igs-popup {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.ultrakit-igs-trigger-hover .ultrakit-igs-hotspot:hover .ultrakit-igs-popup {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}

.ultrakit-igs-popup::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 7px solid transparent; border-top-color: #ffffff;
}

.ultrakit-igs-popup-thumb { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #f0f0f0; }
.ultrakit-igs-popup-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ultrakit-igs-popup-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ultrakit-igs-popup-name { font-size: 12.5px; font-weight: 700; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ultrakit-igs-popup-price { font-size: 13px; font-weight: 800; color: #6c5ce7; }
.ultrakit-igs-popup-btn {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: #6c5ce7; color: #ffffff !important;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: opacity 0.2s ease;
}
.ultrakit-igs-popup-btn:hover { opacity: 0.85; }

/* ---- Skin: dark ---- */
.igs-skin-2 .ultrakit-igs-popup { background: #1a1a2e; }
.igs-skin-2 .ultrakit-igs-popup::after { border-top-color: #1a1a2e; }
.igs-skin-2 .ultrakit-igs-popup-name { color: #ffffff; }

@media (max-width: 480px) {
    .ultrakit-igs-popup { width: 170px; }
}