/**
 * Frontend CSS - Studio Perets UGC Slider v3.2
 * Subtle green ring, Ken Burns on YouTube circles, YouTube lightbox fix
 */

/* ===== Section ===== */
.wcmg-model-gallery-section { padding: 15px 0; }
.wcmg-section-title { text-align: center; font-size: 16px; font-weight: 500; margin-bottom: 15px; color: #333; }
.wcmg-model-gallery-section[data-direction="rtl"] .wcmg-section-title { text-align: right; }

/* ===== Slider Container ===== */
.wcmg-slider-container { position: relative; display: flex; align-items: center; gap: 6px; }

/* ===== Gallery Wrapper ===== */
.wcmg-gallery-wrapper {
    display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
    padding: 8px 4px; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
    flex: 1; cursor: grab;
}
.wcmg-gallery-wrapper::-webkit-scrollbar { display: none; }
.wcmg-gallery-wrapper:active { cursor: grabbing; }

/* RTL scroll direction */
.wcmg-slider-container[dir="rtl"] .wcmg-gallery-wrapper { direction: rtl; }
.wcmg-slider-container[dir="ltr"] .wcmg-gallery-wrapper { direction: ltr; }

/* ===== Circle Items ===== */
.wcmg-gallery-item {
    position: relative; display: block; flex-shrink: 0;
    width: var(--wcmg-circle-size, 70px); height: var(--wcmg-circle-size, 70px);
    border-radius: 50%; overflow: hidden; cursor: pointer;
    text-decoration: none; border: 2px solid #e5e5e5;
    background: #f5f5f5; transition: all 0.3s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.wcmg-gallery-item:hover { transform: scale(1.06); border-color: #d0d0d0; }
.wcmg-gallery-item img, .wcmg-gallery-item video {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
    border-radius: 50% !important; display: block;
    max-width: none !important; max-height: none !important;
}

/* ===== Circle Progress Ring — SUBTLE ===== */
.wcmg-circle-progress {
    position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px;
    pointer-events: none; z-index: 6; opacity: 0; transition: opacity 0.4s ease; overflow: visible;
}
.wcmg-circle-active .wcmg-circle-progress { opacity: 1; }
.wcmg-circle-progress svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.wcmg-circle-progress circle {
    fill: none;
    stroke: rgba(34, 197, 94, 0.5);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 100.53;
    stroke-dashoffset: 100.53;
}

/* Active circle — soft glow, no harsh border */
.wcmg-circle-active {
    border-color: rgba(34, 197, 94, 0.45) !important;
    box-shadow: 0 0 0 1.5px rgba(34,197,94,0.15), 0 2px 10px rgba(34,197,94,0.1) !important;
    transform: scale(1.08);
}
.wcmg-circle-active .wcmg-play-icon { opacity: 0; }
.wcmg-circle-active .wcmg-zoom-icon { opacity: 0 !important; transform: translate(-50%,-50%) scale(0) !important; }

/* Green dot indicator — smaller, subtle */
.wcmg-gallery-item::after {
    content: ''; position: absolute; bottom: 2px; right: 2px;
    width: 10px; height: 10px; background: #22c55e;
    border: 1.5px solid #fff; border-radius: 50%; z-index: 5;
    opacity: 0.85;
}
[dir="rtl"] .wcmg-gallery-item::after { right: auto; left: 2px; }

/* Active green dot pulse — gentle */
.wcmg-circle-active::after {
    animation: wcmg-dot-pulse 2s ease infinite;
    opacity: 1;
}
@keyframes wcmg-dot-pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.2);opacity:0.6;} }

/* ===== Ken Burns animation on YouTube/external thumbnails in circles ===== */
.wcmg-circle-active.wcmg-gallery-external img {
    animation: wcmg-ken-burns 8s ease-in-out infinite alternate;
}
@keyframes wcmg-ken-burns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.25) translate(-5%, -3%); }
}

/* Video playing in circle — subtle scale pulse when active */
.wcmg-circle-active.wcmg-gallery-video video {
    /* video actually plays, no extra animation needed */
}

/* ===== Arrows ===== */
.wcmg-arrow {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid #e0e0e0; background: #fff; color: #888;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.25s ease; z-index: 3;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05); padding: 0; margin: 0; line-height: 1;
    opacity: 0.7;
}
.wcmg-arrow:hover { opacity: 1; background: #fafafa; border-color: #ccc; color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transform: scale(1.05); }
.wcmg-arrow:active { transform: scale(0.95); }
.wcmg-arrow-hidden { opacity: 0; pointer-events: none; }
.wcmg-arrow svg { width: 14px; height: 14px; display: block; }
[dir="rtl"] .wcmg-arrow-prev svg { transform: rotate(180deg); }
[dir="rtl"] .wcmg-arrow-next svg { transform: rotate(180deg); }

/* ===== Dots ===== */
.wcmg-dots { display: flex; justify-content: center; gap: 5px; padding: 8px 0 2px; }
.wcmg-dot { width: 6px; height: 6px; border-radius: 50%; background: #ddd; cursor: pointer; transition: all 0.3s ease; }
.wcmg-dot:hover { background: #aaa; transform: scale(1.15); }
.wcmg-dot.active { background: rgba(34,197,94,0.7); transform: scale(1.2); box-shadow: 0 0 4px rgba(34,197,94,0.3); }

/* ===== External Video Badge & Placeholder ===== */
.wcmg-provider-badge { position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.6); color: #fff; font-size: 7px; font-weight: 600; padding: 1px 4px; border-radius: 3px; z-index: 7; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.3px; }
.wcmg-ext-placeholder-circle { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 50%; }
.wcmg-ext-placeholder-circle span { color: #fff; font-size: 16px; font-weight: 700; }
.wcmg-gallery-video .wcmg-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 3; color: rgba(255,255,255,0.9); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); pointer-events: none; transition: opacity 0.3s; }
.wcmg-gallery-video .wcmg-play-icon svg { width: 18px; height: 18px; }
.wcmg-zoom-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0); z-index: 3; color: #fff; opacity: 0; transition: all 0.25s ease; pointer-events: none; background: rgba(0,0,0,0.3); border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.wcmg-gallery-image:hover .wcmg-zoom-icon { opacity: 1; transform: translate(-50%,-50%) scale(1); }


/* ══════════ LIGHTBOX / STORIES ══════════ */

body.wcmg-stories-open { overflow: hidden !important; }

.wcmg-stories-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.9); z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
    direction: ltr !important; text-align: left !important;
}
.wcmg-stories-overlay.active { opacity: 1; visibility: visible; }

.wcmg-stories-container {
    position: relative; width: 100%; max-width: 400px; max-height: 90vh;
    display: flex; flex-direction: column; align-items: center;
}

/* Progress bars */
.wcmg-stories-progress { position: absolute; top: -28px; left: 0; right: 0; display: flex; gap: 3px; padding: 0 8px; z-index: 10; }
.wcmg-story-progress-item { flex: 1; height: 2px; background: rgba(255,255,255,0.3); border-radius: 2px; overflow: hidden; }
.wcmg-story-progress-fill { height: 100%; width: 0%; background: #fff; border-radius: 2px; }

/* ══ CLOSE BUTTON ══ */
.wcmg-stories-close,
.wcmg-stories-close:link,
.wcmg-stories-close:visited,
.wcmg-stories-close:hover,
.wcmg-stories-close:focus,
.wcmg-stories-close:active {
    position: absolute !important; top: 8px !important; right: 8px !important; left: auto !important;
    width: 36px !important; height: 36px !important; min-width: 0 !important; min-height: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: rgba(0,0,0,0.5) !important; border: none !important; border-radius: 50% !important;
    cursor: pointer !important; z-index: 100 !important;
    padding: 0 !important; margin: 0 !important; line-height: 1 !important;
    box-shadow: none !important;
    color: #ffffff !important; text-decoration: none !important;
    -webkit-appearance: none !important; appearance: none !important;
    outline: none !important; font-size: 0 !important;
    transition: background 0.2s ease !important;
}
.wcmg-stories-close:hover { background: rgba(255,255,255,0.15) !important; }
.wcmg-stories-close svg,
.wcmg-stories-close:hover svg {
    width: 20px !important; height: 20px !important; display: block !important;
    stroke: #ffffff !important; fill: none !important;
    stroke-width: 2 !important; color: #ffffff !important;
}
.wcmg-stories-close svg line,
.wcmg-stories-close:hover svg line { stroke: #ffffff !important; }

/* Content area */
.wcmg-stories-content {
    position: relative; width: 100%; display: flex; align-items: center;
    justify-content: center; overflow: hidden; border-radius: 12px; background: #000;
    min-height: 300px;
}
.wcmg-stories-tap-left, .wcmg-stories-tap-right { position: absolute; top: 0; bottom: 0; width: 35%; z-index: 5; cursor: pointer; }
.wcmg-stories-tap-left { left: 0; } .wcmg-stories-tap-right { right: 0; }

/* Image in lightbox */
.wcmg-stories-image {
    max-width: 100% !important; max-height: 80vh !important;
    object-fit: contain !important; border-radius: 12px; transition: opacity 0.2s;
    display: none !important; margin: 0 auto;
}
.wcmg-stories-image.wcmg-show { display: block !important; }

/* Video in lightbox */
.wcmg-stories-video {
    max-width: 100% !important; max-height: 80vh !important; width: 100% !important;
    object-fit: contain !important; border-radius: 12px; transition: opacity 0.2s;
    display: none !important; background: #000;
}
.wcmg-stories-video.wcmg-show { display: block !important; }

/* Iframe in lightbox — YouTube/Vimeo */
.wcmg-stories-iframe-wrap {
    width: 100%; aspect-ratio: 9/16; max-height: 80vh;
    display: none !important; border-radius: 12px; overflow: hidden; background: #000;
}
.wcmg-stories-iframe-wrap.wcmg-show { display: block !important; }
.wcmg-stories-iframe {
    width: 100% !important; height: 100% !important;
    border: none !important; border-radius: 12px;
}

/* Loader */
.wcmg-stories-loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 15; display: none; }
.wcmg-stories-loader.wcmg-show { display: block; }
.wcmg-stories-spinner { width: 36px; height: 36px; border: 2px solid rgba(255,255,255,0.2); border-top-color: #fff; border-radius: 50%; animation: wcmg-spin 0.8s linear infinite; }
@keyframes wcmg-spin { to { transform: rotate(360deg); } }

/* Next preview */
.wcmg-stories-next-preview {
    position: absolute; bottom: 20px; right: -65px;
    width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
    border: 2px solid rgba(255,255,255,0.6); cursor: pointer;
    opacity: 0.8; transition: all 0.3s; z-index: 10;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3); display: none; background: #222;
}
.wcmg-stories-next-preview:hover { opacity: 1; transform: scale(1.08); }
.wcmg-stories-next-preview img, .wcmg-stories-next-preview video { width: 100%; height: 100%; object-fit: cover; }
.wcmg-stories-next-preview video { display: none; }
.wcmg-preview-ext-placeholder { width:100%;height:100%;display:none;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2); }
.wcmg-preview-ext-placeholder span { color:#fff;font-size:14px;font-weight:700; }
.wcmg-preview-play-icon { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:11px;text-shadow:0 1px 3px rgba(0,0,0,0.6);display:none; }

/* ===== Responsive ===== */
@media (min-width:768px) { .wcmg-stories-container { max-width: 420px; } }
@media (max-width:576px) {
    .wcmg-model-gallery-section { padding: 10px 0; }
    .wcmg-gallery-wrapper { gap: 10px; padding: 5px; }
    .wcmg-gallery-item::after { width: 8px; height: 8px; bottom: 1px; right: 1px; border-width: 1px; }
    .wcmg-section-title { font-size: 14px; margin-bottom: 10px; }
    .wcmg-stories-container { max-width: 95%; }
    .wcmg-stories-next-preview { right: 10px; bottom: -55px; }
    .wcmg-stories-close { top: -45px !important; right: 5px !important; }
    .wcmg-arrow { width: 26px; height: 26px; }
    .wcmg-arrow svg { width: 12px; height: 12px; }
    .wcmg-dot { width: 5px; height: 5px; }
}

/* ===== Woodmart ===== */
.woodmart-container .wcmg-model-gallery-section .container { max-width: 100%; width: 100%; }
.color-scheme-dark .wcmg-section-title { color: #fff; }
.color-scheme-dark .wcmg-gallery-item { border-color: #444; background: #222; }
.color-scheme-dark .wcmg-arrow { background: #333; border-color: #555; color: #ccc; }
.color-scheme-dark .wcmg-dot { background: #555; }
.color-scheme-dark .wcmg-dot.active { background: rgba(34,197,94,0.7); }
.wcmg-stories-overlay button, .wcmg-stories-overlay button:hover, .wcmg-stories-overlay button:focus {
    text-transform: none !important; letter-spacing: 0 !important;
}