/* =============================================
   WP Stories - Instagram-Style Public CSS
   ============================================= */

/* ---- Row ---- */
.wps-stories-wrapper { width:100%; overflow:hidden; padding:12px 0; }
.wps-stories-row {
    display:flex;
    flex-direction:row;
    gap:14px;
    overflow-x:auto;
    padding:6px 16px 12px;
    scrollbar-width:none;
    -ms-overflow-style:none;
    direction:rtl;
}
.wps-stories-row::-webkit-scrollbar { display:none; }

/* ---- Bubble ---- */
.wps-story-bubble {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    cursor:pointer;
    flex-shrink:0;
    width:76px;
    -webkit-tap-highlight-color:transparent;
}
.wps-bubble-ring {
    width:80px;
    height:80px;
    border-radius:50%;
    background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
    padding:3px;
    transition:transform .2s ease;
    display:flex;
    align-items:center;
    justify-content:center;
}
.wps-story-bubble:hover .wps-bubble-ring { transform:scale(1.07); }
.wps-story-bubble.wps-viewed .wps-bubble-ring { background:linear-gradient(45deg,#ccc,#aaa); }

.wps-bubble-avatar {
    width:72px;
    height:72px;
    border-radius:50%;
    overflow:hidden;
    background:#eee;
    border:3px solid #fff;
    display:flex;
    align-items:center;
    justify-content:center;
}
.wps-bubble-avatar img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.wps-bubble-placeholder {
    width:100%;
    height:100%;
    background:linear-gradient(135deg,#667eea,#764ba2);
    display:flex;
    align-items:center;
    justify-content:center;
}
.wps-bubble-placeholder svg { width:36px; height:36px; }

.wps-bubble-name {
    font-size:12px;
    color:#333;
    text-align:center;
    max-width:72px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    direction:rtl;
}

/* =============================================
   VIEWER OVERLAY
   ============================================= */
.wps-viewer-overlay, .wps-viewer-overlay * {
    box-sizing:border-box;
}
.wps-viewer-overlay {
    display:none;
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
    width:100% !important;
    height:100% !important;
    z-index:999999;
    background:rgba(0,0,0,.85);
    align-items:center;
    justify-content:center;
    animation:wpsOverlayIn .25s ease;
    margin:0; padding:0;
}
.wps-viewer-overlay.wps-active { display:flex !important; }

@keyframes wpsOverlayIn { from { opacity:0; } to { opacity:1; } }

.wps-viewer {
    position:relative !important;
    width:100% !important;
    max-width:420px !important;
    height:100vh !important;
    max-height:780px !important;
    background:#000 !important;
    border-radius:14px;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    animation:wpsViewerIn .3s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 30px 80px rgba(0,0,0,.5);
    box-sizing:border-box !important;
    margin:0 !important; padding:0 !important;
    flex-shrink:0 !important;
}
@media (max-width:480px) {
    .wps-viewer { border-radius:0; max-height:100vh !important; height:100vh !important; width:100vw !important; max-width:100vw !important; }
}

@keyframes wpsViewerIn {
    from { transform:scale(.88) translateY(20px); opacity:0; }
    to   { transform:scale(1)   translateY(0);    opacity:1; }
}

/* ---- Progress Bar ---- */
.wps-viewer-progress-bar {
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:10;
    display:flex;
    gap:3px;
    padding:10px 10px 0;
}
.wps-prog-seg {
    flex:1;
    height:3px;
    background:rgba(255,255,255,.35);
    border-radius:3px;
    overflow:hidden;
}
.wps-prog-seg-fill {
    height:100%;
    width:0%;
    background:#fff;
    border-radius:3px;
    transition:none;
}
.wps-prog-seg.wps-done .wps-prog-seg-fill { width:100%; }
.wps-prog-seg.wps-active .wps-prog-seg-fill { animation:wpsProgress var(--duration, 5s) linear forwards; }

@keyframes wpsProgress { from { width:0%; } to { width:100%; } }

/* ---- Header ---- */
.wps-viewer-header {
    position:absolute;
    top:20px;
    left:0;
    right:0;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
    direction:rtl;
}
.wps-viewer-info { display:flex; align-items:center; gap:8px; }
.wps-viewer-avatar-sm {
    width:34px;
    height:34px;
    border-radius:50%;
    background:linear-gradient(45deg,#f09433,#bc1888);
    padding:2px;
    overflow:hidden;
}
.wps-viewer-title {
    color:#fff;
    font-size:14px;
    font-weight:700;
    text-shadow:0 1px 4px rgba(0,0,0,.6);
    direction:rtl;
}
.wps-viewer-close {
    background:rgba(255,255,255,.2);
    border:none;
    color:#fff;
    width:32px;
    height:32px;
    border-radius:50%;
    cursor:pointer;
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    line-height:1;
}
.wps-viewer-close:hover { background:rgba(255,255,255,.35); }

/* ---- Media ---- */
.wps-viewer-media-wrap {
    position:absolute !important;
    top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#111;
    margin:0 !important; padding:0 !important;
    overflow:hidden !important;
}
.wps-viewer-media-wrap img,
.wps-viewer-media-wrap video {
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    display:block !important;
    margin:0 !important; padding:0 !important;
}
.wps-slide-fade-in { animation:wpsSlideIn .35s ease; }
@keyframes wpsSlideIn { from { opacity:0; transform:scale(1.04); } to { opacity:1; transform:scale(1); } }

/* ---- Caption + Link (combined bottom overlay) ---- */
.wps-viewer-caption {
    position:absolute !important;
    bottom:0 !important;
    left:0 !important; right:0 !important;
    padding:30px 18px 22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    background:linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 100%);
    direction:rtl;
    z-index:7;
}
.wps-viewer-caption:empty { display:none; }
.wps-caption-text {
    color:#fff;
    font-size:14px;
    line-height:1.6;
    text-align:center;
    text-shadow:0 1px 3px rgba(0,0,0,.8);
    width:100%;
}
.wps-story-link-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,.18);
    color:#fff;
    text-decoration:none;
    padding:10px 22px;
    border-radius:30px;
    font-size:14px;
    font-weight:700;
    direction:rtl;
    box-shadow:0 4px 16px rgba(0,0,0,.2);
    transition:transform .2s, background .2s;
    white-space:nowrap;
    backdrop-filter:blur(12px) saturate(180%);
    -webkit-backdrop-filter:blur(12px) saturate(180%);
    border:1px solid rgba(255,255,255,.3);
    text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.wps-story-link-btn:hover {
    transform:translateY(-2px);
    background:rgba(255,255,255,.28);
    color:#fff;
    text-decoration:none;
}
.wps-story-link-btn::before { content:'🔗'; font-size:13px; }

/* ---- Navigation ---- */
.wps-viewer-nav {
    position:absolute !important;
    top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
    pointer-events:none;
    z-index:5;
}
.wps-nav-prev, .wps-nav-next {
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    width:60px !important;
    max-width:60px !important;
    min-width:0 !important;
    height:100% !important;
    background:transparent !important;
    background-color:transparent !important;
    border:none !important;
    box-shadow:none !important;
    cursor:pointer;
    pointer-events:all;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
    color:rgba(255,255,255,.65) !important;
    transition:color .2s, background-color .2s;
}
.wps-nav-prev:hover, .wps-nav-next:hover {
    color:rgba(255,255,255,1) !important;
    background-color:rgba(0,0,0,.15) !important;
}
.wps-nav-prev { right:0 !important; left:auto !important; }
.wps-nav-next { left:0 !important; right:auto !important; }
.wps-nav-prev svg, .wps-nav-next svg {
    width:28px !important;
    height:28px !important;
    fill:currentColor !important;
    display:block !important;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width:768px) {
    .wps-stories-row { gap:10px; padding:4px 12px 10px; }
    .wps-story-bubble { width:68px; }
    .wps-bubble-ring { width:72px; height:72px; }
    .wps-bubble-avatar { width:64px; height:64px; }
    .wps-viewer { max-width:100%; }
}

@media (max-width:480px) {
    .wps-stories-row { gap:8px; padding:4px 8px 10px; }
    .wps-story-bubble { width:62px; }
    .wps-bubble-ring { width:64px; height:64px; }
    .wps-bubble-avatar { width:56px; height:56px; }
    .wps-bubble-name { font-size:11px; }
}