/* pifv.css - Flipkart-like dual slider + fullscreen viewer */

/* Page slider */
.pifv-root{width:100%}
/* IMPORTANT: position: relative is key for placing the navigation buttons */
.pifv-slider{position:relative;overflow:hidden;max-width:100%;border-radius:6px;background:#fff}
.pifv-track{display:flex;transition:transform .35s cubic-bezier(.22,.9,.32,1);will-change:transform}

/* === YAHAN CHANGE KIYA GAYA HAI === */
.pifv-slide{
    flex:0 0 100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2px;
    box-sizing:border-box;
    cursor:pointer;
    
    /* 1. FIXED HEIGHT: Yahan height set ki gayi hai. Aap 400px ko 350px ya 500px bhi kar sakte hain. */
    height: 450px; 
}
/* DEFAULT/MOBILE: object-fit: contain ensures perfect image scaling without cropping, centered */
.pifv-slide img{
    max-width:100%;
    display:block;
    border-radius:6px;
    
    /* 2. CROP EFFECT: 'contain' ki jagah 'cover' kiya gaya hai aur height 100% di gayi hai. */
    height: 100%;
    width: 100%;
    object-fit: cover; 
}
/* === CHANGES END === */


.pifv-dots{display:flex;gap:8px;justify-content:center;padding:0px 0}
.pifv-dots button{width:8px;height:0px;border-radius:50%;border:none;background:rgba(0,0,0,0.2);cursor:pointer;padding:0;transition:transform .15s, background .15s}
.pifv-dots button.active{background:rgba(0,0,0,0.85);transform:scale(1.2)}

/* UPDATED: Desktop Slider Navigation Buttons */
.pifv-nav {
    display: none; /* Hide by default (i.e., on Mobile) */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* NEW STYLES for Flipkart look */
    background: rgba(0, 0, 0, 0.65); /* Blackish background */
    border: none;
    color: #fff; /* White arrow */
    font-size: 20px; /* Bigger arrow */
    cursor: pointer;
    z-index: 10;
    width: 36px; /* Slightly bigger button */
    height: 36px;
    border-radius: 50%;
    padding: 0;
    line-height: 1;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    transition: background .2s, box-shadow .2s;
}

/* FIX: Remove default focus outline/border after click/tab */
.pifv-nav:focus, .pifv-nav:active {
    outline: none !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2); /* Maintain box shadow */
    background: rgba(0, 0, 0, 0.65); /* Maintain standard background color */
}

.pifv-nav.prev {
    left: 10px;
}
.pifv-nav.next {
    right: 10px;
}
.pifv-nav:hover {
    background: rgba(0, 0, 0, 0.85); /* Darker on hover */
    box-shadow: 0 1px 8px rgba(0,0,0,0.3);
}


/* Viewer (fullscreen) */
.pifv-viewer{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:999;
    pointer-events:none;
    opacity:0;
    transition:opacity .22s ease;
    background:rgba(0,0,0,0.92); 
}
.pifv-viewer.open{pointer-events:auto;opacity:1}
.pifv-overlay{position:absolute;inset:0;background:transparent;} 
.pifv-close{position:fixed;top:16px;right:16px;z-index:100020;background:#141114;border:0;color:#fff;font-size:16px;cursor:pointer;padding:8px;border-radius:0%}
.pifv-viewer-inner{position:relative;z-index:100010;max-width:100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pifv-viewer-track{display:flex;height:100%;transition:transform .35s cubic-bezier(.22,.9,.32,1);will-change:transform}
.pifv-viewer-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;padding:10px;z-index:100010;box-sizing:border-box}
.pifv-viewer-slide img{max-width:100%;max-height:100%;height:auto;border-radius:6px;display:block;object-fit:contain}
.pifv-viewer-dots{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;display:flex;gap:8px;z-index:100030}
.pifv-viewer-dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,0.35);cursor:pointer;padding:0;transition:transform .15s, background .15s}
.pifv-viewer-dots button.active{background:rgba(255,255,255,1);transform:scale(1.3)}

/* no images */
.pifv-no-images{padding:5px;background:#f8f8f8;border:1px solid #eee;border-radius:6px;color:#333}

/* responsive adjustments */
@media (max-width:767px){
    /* Mobile: Adjusted styles for better mobile viewer experience */
    .pifv-close{top:10px;right:10px;font-size:22px;background:rgba(0,0,0,0.2);} 
    .pifv-viewer-slide{padding:0px;} 
    .pifv-viewer-dots{bottom:12px}
    
    /* === FIX: Mobile par border-radius hataya === */
    .pifv-slider { border-radius: 0; } /* YEH LINE ADD KI GAYI HAI */
    .pifv-slide { height: 350px; padding:0px; border-radius:0;} 
    .pifv-slide img{ border-radius:0;padding:0px 0px;}
    /* === FIX END === */

    /* Mobile: Agar aapko mobile par height alag chahiye (jaise 300px), toh yeh line add karein */
    /* .pifv-slide { height: 300px; } */
}

/* ================================================= */
/* === DESKTOP-SPECIFIC STYLES (Zoom + Navigation) ==== */
/* ================================================= */

@media (min-width: 768px) {
    /* Desktop: Enable Navigation Buttons */
    .pifv-nav {
        display: flex; /* Show buttons only on desktop */
        align-items: center;
        justify-content: center;
    }
    
    /* Desktop: Zoom ko slide box ke andar clip karega */
    .pifv-slide {
        overflow: hidden !important; 
        cursor: default !important; /* Cursor ko pointer se default karega */
        /* border-radius:0; <-- YEH GALAT THA, HATA DIYA */
    }
    
    /* Desktop: Zoom-out ke liye smooth transition */
    .pifv-slide img {
        transition: transform .22s ease-out; 
        will-change: transform;
        /* border-radius:0; <-- YEH GALAT THA, HATA DIYA */
        
        /* Desktop Zoom: Image ko poore box par failana zaroori hai zoom ke liye */
        /* Yeh 'cover !important' pehle se tha, aur hamara naya 'object-fit: cover' isse match karta hai */
        object-fit: cover !important; 
    }
}