/* ==========================================
   ULTRAKIT IMAGE CAROUSEL WITH THUMBNAIL — Premium
   3 Thumbnail Positions × Fade/Slide × Lightbox × 3 Skins
   ========================================== */

.ultrakit-icw-wrapper { --ultrakit-icw-accent: #6c5ce7; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.ultrakit-icw-empty { text-align: center; color: #aaa; padding: 30px; }

.ultrakit-icw-main-col { width: 100%; }
.ultrakit-icw-main { position: relative; width: 100%; height: 420px; border-radius: 14px; overflow: hidden; background: #f0f0f0; }

.ultrakit-icw-main-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.ultrakit-icw-main-slide.is-active { opacity: 1; pointer-events: auto; }
.ultrakit-icw-trans-fade .ultrakit-icw-main-slide { transition: opacity 0.5s ease; }
.ultrakit-icw-trans-slide .ultrakit-icw-main-slide { transition: transform 0.5s ease, opacity 0.5s ease; transform: translateX(30px); }
.ultrakit-icw-trans-slide .ultrakit-icw-main-slide.is-active { transform: translateX(0); }

.ultrakit-icw-main-slide img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.ultrakit-icw-caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 14px 18px;
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    color: #ffffff; font-size: 13px; font-weight: 600;
}

.ultrakit-icw-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: none;
    padding: 0 !important;
    box-sizing: border-box;
    background: rgba(255,255,255,0.85);
    color: var(--ultrakit-icw-accent) !important;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}
.ultrakit-icw-arrow:hover { background: var(--ultrakit-icw-accent); color: #ffffff !important; }
.ultrakit-icw-prev { left: 14px; }
.ultrakit-icw-next { right: 14px; }
.ultrakit-icw-arrow-icon { width: 16px; height: 16px; display: block; pointer-events: none; flex-shrink: 0; }

/* ---- Thumbnails ---- */
.ultrakit-icw-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.ultrakit-icw-thumb {
    width: 76px; height: 76px; border-radius: 10px; overflow: hidden;
    border: 2px solid transparent;
    padding: 0 !important;
    box-sizing: border-box;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.25s ease;
    flex-shrink: 0;
    background: #f0f0f0;
}
.ultrakit-icw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ultrakit-icw-thumb:hover { opacity: 0.85; }
.ultrakit-icw-thumb.is-active { opacity: 1; border-color: var(--ultrakit-icw-accent); }

/* ---- Thumbnail positions ---- */
.ultrakit-icw-thumbpos-left, .ultrakit-icw-thumbpos-right { flex-direction: row; align-items: flex-start; }
.ultrakit-icw-thumbpos-left { flex-direction: row-reverse; }
.ultrakit-icw-thumbpos-left .ultrakit-icw-thumbs,
.ultrakit-icw-thumbpos-right .ultrakit-icw-thumbs { flex-direction: column; }
.ultrakit-icw-thumbpos-left .ultrakit-icw-main-col,
.ultrakit-icw-thumbpos-right .ultrakit-icw-main-col { flex: 1; min-width: 0; }

/* ---- Skins ---- */
.icw-skin-2 .ultrakit-icw-main { background: #1a1a2e; border: 3px solid #1a1a2e; }
.icw-skin-2 .ultrakit-icw-thumb { border-color: rgba(255,255,255,0.15); }

.icw-skin-3 .ultrakit-icw-main { border-radius: 0; }
.icw-skin-3 .ultrakit-icw-thumb { border-radius: 0; }

/* ---- Lightbox ---- */
.ultrakit-icw-lightbox {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(10,10,15,0.94);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
}
.ultrakit-icw-lightbox.is-open { opacity: 1; visibility: visible; }
.ultrakit-icw-lightbox[hidden] { display: none; }
.ultrakit-icw-lb-img { max-width: 90vw; max-height: 88vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.ultrakit-icw-lb-close {
    position: absolute; top: 24px; right: 24px; width: 42px; height: 42px;
    background: rgba(255,255,255,0.1); color: #ffffff !important; border: none; border-radius: 50%;
    padding: 0 !important;
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; line-height: 1; cursor: pointer; transition: background 0.2s ease;
}
.ultrakit-icw-lb-close:hover { background: var(--ultrakit-icw-accent); }

@media (max-width: 640px) {
    .ultrakit-icw-thumbpos-left, .ultrakit-icw-thumbpos-right { flex-direction: column; }
    .ultrakit-icw-thumbpos-left .ultrakit-icw-thumbs,
    .ultrakit-icw-thumbpos-right .ultrakit-icw-thumbs { flex-direction: row; }
    .ultrakit-icw-main { height: 260px !important; }
}