/* ================= CSS (FINAL: STRICT NO CROP & NO ZOOM) ================= */

.insta-feed-container { background-color: #fafafa !important; min-height: 100vh; width: 100%; padding: 20px 0 50px 0; box-sizing: border-box; }
.insta-feed-container .insta-post { width: 100%; max-width: 450px; margin: 0 auto 30px auto; background: #fff; border-radius: 10px; border: 1px solid #dbdbdb; overflow: hidden; transform: translateZ(0); box-shadow: none !important; }

/* HEADER */
.insta-feed-container .insta-header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.insta-feed-container .insta-dp-wrap { width: 44px; height: 44px; flex-shrink: 0; }
.insta-feed-container .insta-letter-avatar { width: 44px; height: 44px; border-radius: 50%; background: #ccc; color: #fff; font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
.insta-feed-container .insta-user { display: flex; flex-direction: column; line-height: 1.2; }
.insta-feed-container .insta-user b { font-size: 15px; font-weight: 700; color: #262626; }
.insta-feed-container .insta-header-caption { display: block; padding: 2px 12px 15px 12px; font-weight: 700; font-size: 14px; color: #262626; line-height: 1.4; }

/* MEDIA CONTAINER */
.insta-feed-container .insta-image-box { width: 100%; background: #000; position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.insta-feed-container .insta-slider { display: flex; width: 100%; height: 100%; overflow: visible; transition: transform 0.3s ease-out; will-change: transform; }

/* SLIDE SETTINGS */
.insta-feed-container .insta-slide { 
    flex: 0 0 100%; 
    width: 100%; 
    height: 100%; 
    position: relative !important; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: #000; 
}

/* 🔥 BLUR BACKGROUND (Only Visible for Images) */
.insta-feed-container .insta-blur-bg { 
    position: absolute !important; 
    top: 0; 
    left: 0; 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    filter: blur(30px) brightness(0.7); 
    transform: scale(1.15); 
    z-index: 1; 
    pointer-events: none; 
    opacity: 1; 
    display: block;
}

/* 🔥 MAIN MEDIA (STRICT NO CROP RULE) */
.insta-feed-container .insta-main-media,
.insta-slide.smart-zoom .insta-main-media { 
    position: relative !important; 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: contain !important; 
    transform: none !important; 
    z-index: 5; 
    display: block; 
    background: transparent; 
}

/* 🔥 VIDEO SPECIFIC (Black Background, No Blur) */
.insta-video-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide Blur behind video */
.insta-video-wrap .insta-blur-bg,
video.insta-blur-bg {
    display: none !important; 
    opacity: 0 !important;
}

/* Video fit logic */
video.insta-main-media {
    background: #000 !important;
    object-fit: contain !important; 
}

/* Hide Unwanted UI Elements (Clean View) */
.insta-controls-layer, .insta-progress-bar, .no-sound-msg, .insta-volume-btn { display: none !important; }

/* COUNTER & DOTS */
.insta-feed-container .insta-counter { position: absolute; top: 14px; right: 14px; background: rgba(38, 38, 38, 0.85); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 14px; z-index: 20; pointer-events: none; }
.insta-dots { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10; pointer-events: none; }
.insta-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); }
.insta-dots span.active { background: #fff; transform: scale(1.2); }

/* ACTIONS & TAGS */
.insta-actions { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 6px 12px; width: 100%; box-sizing: border-box; }
.insta-actions-left { display: flex; align-items: center; gap: 20px; }
.action-btn-wrap { display: flex; align-items: center; gap: 6px; cursor: pointer; transition: transform 0.1s; color: #262626; }
.action-btn-wrap:active { transform: scale(0.95); }
.insta-actions i { font-size: 24px; color: #262626; display: block; }
.insta-like-btn.liked { color: #ef4444; }
.action-btn-wrap span { font-size: 14px; font-weight: 700; color: #262626; margin-top: 2px; }

.insta-footer-row { padding: 4px 12px 15px; position: relative; z-index: 50; display: flex; }
.insta-tag-group { display: flex; gap: 8px; flex-wrap: wrap; }
.insta-post-tag { font-weight: 700; color: #8e8e8e; font-size: 13px; cursor: pointer; user-select: none; transition: all 0.2s ease; padding: 3px 8px; border-radius: 4px; }
.insta-post-tag:hover { background: rgba(0, 0, 0, 0.05); }
.insta-post-tag.cat-active { background-color: #e0f2fe; color: #0095f6; }
.insta-post-tag.active-filter { background-color: #0095f6; color: #fff; }

/* Comment Sheet & Avatars */
.comment-sheet { position: fixed; left: 0; right: 0; bottom: 0; height: 70vh; background: #fff; border-radius: 20px 20px 0 0; transform: translateY(100%); transition: transform 0.35s ease-in-out; z-index: 999999; overflow-y: auto; box-shadow: none; }
.comment-sheet.open { transform: translateY(0); box-shadow: 0 -4px 10px rgba(0,0,0,0.15); }
.comment-sheet h3 { margin: 0; padding: 15px; text-align: center; border-bottom: 1px solid #eee; font-size: 16px; }
.close-sheet { position: absolute; top: 12px; right: 15px; font-size: 22px; cursor: pointer; z-index: 10; color:#333; }
.comment-plugin-box { padding: 0 15px; }
.av-red { background:#ef4444 !important; } .av-green { background:#22c55e !important; } .av-yellow { background:#facc15 !important; color:#222; } .av-pink { background:#ec4899 !important; } .av-blue { background:#3b82f6 !important; } .av-violet { background:#8b5cf6 !important; } .av-orange { background:#f97316 !important; } .av-teal { background:#14b8a6 !important; } .av-brown { background:#92400e !important; } .av-gray { background:#6b7280 !important; }