/* 

Add here your custom css styles 
Example:
p { text-align: center; color: red; }

*/ 


/* Target the Plyr wrappers and force the 6:10 ratio */
.plyr__video-wrapper, 
.plyr__video-wrapper--fixed-ratio {
    padding-bottom: 0 !important; /* Removes Plyr's default 16:9 padding hack */
    aspect-ratio: 6 / 10 !important; /* Sets the specific vertical ratio */
    height: auto !important;
    max-height: 80vh !important; /* Prevents it from being too tall for the screen */
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
}



/* The new rules you added to stop the jumping */
video.js_video-plyr {
    width: 100% !important;
    aspect-ratio: 6 / 10 !important;
    max-height: 80vh !important;
    object-fit: contain !important;
    background: #000;
}
.plyr--video {
    aspect-ratio: 6 / 10 !important;
    max-height: 80vh !important;
    width: 100% !important;
}



/* Ensure the video element inside fits perfectly */
.plyr__video-wrapper video {
    /*height: 100% !important;*/
    width: 100% !important;
    object-fit: contain !important; /* Change to 'cover' if you want no black bars */
}



/* 1. Curve the edges of the video container */
.plyr__video-wrapper, 
.plyr__video-wrapper--fixed-ratio,
.js_video-player,
.video-container {
    border-radius: 20px !important; /* Adjust this number for more/less curve */
    overflow: hidden !important;    /* Critical: This 'clips' the video corners to match the curve */
}

/* 2. Curve the video element itself to be safe */
.plyr__video-wrapper video,
video {
    border-radius: 20px !important;
    object-fit: contain; /* Helps the video fill the curved corners */
}

/* 3. Optional: Curve the entire post box for a modern look */
.post {
    border-radius: 20px !important;
    border: 1px solid #ddd; /* Adds a light border to see the curves better */
}



/* VeloSlidex: High-Contrast Monetization Button */
.monetizer-btn {
    font-size: 12px !important; /* Larger text */
    font-weight: 600 !important;
    color: #ffffff !important; /* Pure white for contrast */
    background-color: #218838 !important; /* Deeper green for better readability */
    border: none !important;
    padding: 4px 12px !important; /* Bigger clickable area */
    border-radius: 4px !important; /* Professional blocky-round look */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.monetizer-btn:hover {
    background-color: #1e7e34 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}





/* Update your CSS to this cleaner version */

/* Ensure the placeholder doesn't break the box structure on mobile */
.ql-editor.ql-blank::before {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
}

/* Fix Quill placeholder in Night Mode */
body.night-mode .ql-editor.ql-blank::before {
    color: rgba(255, 255, 255, 0.6) !important; /* Light white/grey */
    font-style: normal;
    opacity: 1 !important; /* Prevents mobile browsers from dimming it further */
}

/* Optional: Ensure the typed text is also fully white on mobile */
body.night-mode .ql-editor {
    color: #ffffff !important;
}




.preloader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 999999;
    display: flex;
    justify-content: center; /* Vertically centers the group */
    align-items: center;     /* Horizontally centers the group */
}

.preloader-content {
    max-width: 80%; 
    display: flex;
    flex-direction: column;  /* Stacks logo over text */
    align-items: center;     /* CRITICAL: Centers the logo and text horizontally */
    text-align: center;      /* Extra safety for text centering */
    animation: breathe 2s ease-in-out infinite;
}

.pulse-logo {
    /* Adjust this value until the size looks right to you */
    width: 100px; 
    
    height: auto;
    display: block;
    margin-bottom: 10px; /* Space between logo and text */
}

.preloader-title {
    margin-top: 15px;
    font-size: 24px;
    font-weight: 600;
    font-family: sans-serif;
    display: block;

    /* Left-to-Right Glow Setup */
    /* Use 'to right' for the gradient direction */
    background: linear-gradient(to right, #333 20%, #fff 50%, #333 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Linear makes it a constant slide; ease-in-out makes it feel more natural */
    animation: shine 2s linear infinite; 
}

/* Night mode text color */
body.night-mode .preloader-title {
    background: linear-gradient(to right, #fff 20%, #666 50%, #fff 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Night mode support */
body.night-mode .preloader-wrapper {
    background: #161616;
}

/* Corrected Animation for Left-to-Right Movement */
@keyframes shine {
    0% {
        /* Start the shine off-canvas to the left */
        background-position: 200% center; 
    }
    100% {
        /* Pull it across to the right */
        background-position: -200% center;
    }
}


@keyframes breathe {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}




/* Base style for the message text */
.daytime-text-adaptive {
    font-weight: 300;
    animation: pulse 5s infinite alternate;
}

/* LIGHT MODE: Darker green for better readability on white */
.daytime-text-adaptive {
    color: #0d5a01 !important; /* Dark Forest Green */
}

/* NIGHT MODE: Brighter, neon green to pop on dark background */
body.night-mode .daytime-text-adaptive {
    color: #26ff05 !important; /* Bright Lime/Neon Green */
    text-shadow: 0 0 5px rgba(38, 255, 5, 0.2); /* Optional: subtle glow */
}


/* Hide scrollbar for Chrome, Safari, and Opera */
.reels-box-wrapper::-webkit-scrollbar {
    display: none !important;
}

/* Hide scrollbar for IE, Edge, and Firefox */
.reels-box-wrapper {
    -ms-overflow-style: none !important;  /* IE and Edge */
    scrollbar-width: none !important;  /* Firefox */
}









/* Base Container structural alignment */
.ele_post_filters_nav.ele_scroll {
    overflow-x: auto !important;
    display: flex !important;
    padding-bottom: 6px !important; /* Leaves room for the custom bar */
}

/* Target the track line layout */
.ele_post_filters_nav.ele_scroll::-webkit-scrollbar {
    height: 4px !important; /* Makes the bar ultra-thin */
}

/* Color background track */
.ele_post_filters_nav.ele_scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 10px !important;
}

/* The actual draggable slider handle */
.ele_post_filters_nav.ele_scroll::-webkit-scrollbar-thumb {
    background: #a0a0a0 !important; /* Elegant gray handle */
    border-radius: 10px !important;
}

/* Darken handle on hover */
.ele_post_filters_nav.ele_scroll::-webkit-scrollbar-thumb:hover {
    background: #787878 !important;
}





.live-stream-video{
  height:80vh;
  
}

.agora_video_player{
  height:100%;
}




/* Target the Plyr wrappers and force the 9:7 ratio */

.youtube-player, .js_lightbox-live   {
    padding-bottom: 0 !important; /* Removes Plyr's default 16:9 padding hack */
    aspect-ratio: 6 / 10 !important; /* Sets the specific vertical ratio */
    height: auto !important;
    max-height: 80vh !important; /* Prevents it from being too tall for the screen */
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #000;
}



/* Ensure the video element inside fits perfectly */
.youtube-player, .with-live video {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important; /* Change to 'cover' if you want no black bars */
}



/* 1. Curve the edges of the video container */
.youtube-player, .with-live, .js_lightbox-live {
    border-radius: 20px !important; /* Adjust this number for more/less curve */
    overflow: hidden !important;    /* Critical: This 'clips' the video corners to match the curve */
}

/* 2. Curve the video element itself to be safe */
.youtube-player, .with-live video,
video {
    border-radius: 20px !important;
    object-fit: cover; /* Helps the video fill the curved corners */
}

/* 3. Optional: Curve the entire post box for a modern look */
.youtube-player, .with-live, .js_lightbox-live {
    border-radius: 20px !important;
}


 /* --- VELOSLIDEX SYSTEM NOTIFICATION TEXT VISIBILITY FIX --- */
    .toast, .toast-header, .toast-body, .notification-popup, .onesignal-toast {
        background-color: #1e293b !important; /* Forces a sleek, professional dark slate background */
        color: #ffffff !important;            /* Forces clean, bright white text that is perfectly readable */
        border-radius: 12px !important;       /* Matches your modern rounded corners theme */
        border: 1px solid #334155 !important;
        position: fixed !important;   /* Floats the element relative to the screen */
      
      
top: 10% !important;          /* Places it 10% down from the very top */
leftxx: 50% !important;         /* Centers it horizontally */
z-index: 9999 !important;     /* Ensures it stays on top of all other content */
font-size:15px !important;
    }
    .toast-header strong, .notification-title {
        color: #f43f5e !important;            /* Sharp contrast red highlight for notification headers */
        font-weight: 1000 !important;
    }



body.night-mode .btn_send_gift,
html.night-mode .btn_send_gift,
.night-mode .btn_send_gift {
    color: #6b4c0a !important;
    -webkit-text-fill-color: #6b4c0a !important;
}










/* ==========================================================================
   SECTION 1: SYSTEM CONTROLS & TOGGLE BUTTON SWITCHER BAR 
   ========================================================================== */

.instagram-profile-container .instagram-custom-switcher-bar {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 0 !important;
    margin-bottom: 5px !important;
    box-sizing: border-box !important;
}

.instagram-profile-container .view-toggle-buttons {
    display: flex !important;
    gap: 10px !important;
}

.instagram-profile-container .view-toggle-buttons .btn {
    background: transparent !important;
    border: 1px solid rgba(125, 125, 125, 0.2) !important;
    color: inherit !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: background 0.2s ease !important;
}

.instagram-profile-container .view-toggle-buttons .btn.active {
    background: #876426 !important;
    color: #ffffff !important;
    border-color: #876426 !important;
}


#instagram-grid-sort-select option {
    background: #ffffff !important;
    color: #000000 !important;
}
/* If dark mode is active, it handles background gracefully */
body.dark #instagram-grid-sort-select option {
    background: #1e1e1e !important;
    color: #ffffff !important;
}






/* ==========================================================================
   SECTION 2: NATIVE LAYOUT STATE RECOVERY MECHANICS
   ========================================================================== */
.instagram-profile-container:not(.style-grid-active) .instagram-grid-only-layout {
    display: none !important;
}

.instagram-profile-container:not(.style-grid-active) .instagram-vertical-only-layout {
    display: block !important;
}

.instagram-profile-container:not(.style-grid-active) img,
.instagram-profile-container:not(.style-grid-active) .post-media img,
.instagram-profile-container:not(.style-grid-active) .post-img-container img,
.instagram-profile-container:not(.style-grid-active) .pg-photo img {
    position: relative !important;
    object-fit: contain !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

.instagram-profile-container:not(.style-grid-active) .post {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    box-sizing: border-box !important;
    margin: 0 0 15px 0 !important; /* Resets outer spacing margins */
    padding: 0 !important; /* Strips layout padding so it reaches the edge */
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important; /* Forces the box straight to the screen borders */
}

/* FIX: Strips Sngine's hidden parent container spacing blocks safely */
.instagram-profile-container:not(.style-grid-active), 
.instagram-profile-container:not(.style-grid-active) .posts-stream, 
.instagram-profile-container:not(.style-grid-active) .js_posts_stream, 
.instagram-profile-container:not(.style-grid-active) div[id*="posts-stream"], 
.instagram-profile-container:not(.style-grid-active) [data-get="posts_profile"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
}

/* Specific Timeline List Items - Fixed to kill the vertical scrollbar */
.instagram-profile-container:not(.style-grid-active) ul, 
.instagram-profile-container:not(.style-grid-active) li {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    list-style: none !important;
    /* Kill both horizontal and vertical scrolls on item wrapper containers */
    overflow: visible !important; 
}

/* Ensure the Sngine post container expands cleanly to its full graphic height */
.instagram-profile-container:not(.style-grid-active) .post {
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    overflow: visible !important;
}


/* FIX: Targets the theme's core structural panels that are keeping it squeezed in */
.instagram-profile-container:not(.style-grid-active) .card,
.instagram-profile-container:not(.style-grid-active) .panel,
.instagram-profile-container:not(.style-grid-active) .post-body,
.instagram-profile-container:not(.style-grid-active) .product-details,
.instagram-profile-container:not(.style-grid-active) .funding-details {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 0 !important;
}





/* ==========================================================================
   SECTION 3: THREE-COLUMN GRID WRAPPER ARCHITECTURE
   ========================================================================== */
.instagram-profile-container.style-grid-active div[id*="posts-stream"] > ul,
.instagram-profile-container.style-grid-active .js_posts_stream > ul,
.instagram-profile-container.style-grid-active .posts-stream > ul,
.instagram-profile-container.style-grid-active [data-get="posts_profile"] > ul {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

.instagram-profile-container.style-grid-active .posts-stream,
.instagram-profile-container.style-grid-active .js_posts_stream,
.instagram-profile-container.style-grid-active div[id*="posts-stream"],
.instagram-profile-container.style-grid-active [data-get="posts_profile"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.instagram-profile-container.style-grid-active .posts-stream li,
.instagram-profile-container.style-grid-active .js_posts_stream li,
.instagram-profile-container.style-grid-active [data-get="posts_profile"] li {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   SECTION 4: ACTIVE GRID CELL BOX CONSTRAINTS
   ========================================================================== 
.instagram-profile-container.style-grid-active .posts-stream .post,
.instagram-profile-container.style-grid-active .js_posts_stream .post,
.instagram-profile-container.style-grid-active [data-get="posts_profile"] .post,
.instagram-profile-container.style-grid-active div[id*="posts-stream"] .post {
    display: block !important;
    grid-column: auto !important;
    margin: 0 !important;
    border: 1px solid rgba(125, 125, 125, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.instagram-profile-container.style-grid-active video,
.instagram-profile-container.style-grid-active .fluid-player,
.instagram-profile-container.style-grid-active [class*="player"],
.instagram-profile-container.style-grid-active .plyr {
    content-visibility: hidden !important;
    display: none !important;
    width: 0px !important;
    height: 0px !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

body[class*="post"] img.js_lightbox-thumb, 
body[class*="video"] .post-img img,
.post:has(video, iframe, .plyr--playing) img,
.post:has(video, iframe, .plyr--playing) [style*="background-image"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0px !important;
}*/


/* ==========================================================================
   SECTION 4: ACTIVE GRID CELL BOX CONSTRAINTS
   ========================================================================== */
.instagram-profile-container.style-grid-active .posts-stream .post,
.instagram-profile-container.style-grid-active .js_posts_stream .post,
.instagram-profile-container.style-grid-active [data-get="posts_profile"] .post,
.instagram-profile-container.style-grid-active div[id*="posts-stream"] .post {
    display: block !important;
    grid-column: auto !important;
    margin: 0 !important;
    border: 1px solid rgba(125, 125, 125, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    position: relative !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.instagram-profile-container.style-grid-active video,
.instagram-profile-container.style-grid-active .fluid-player,
.instagram-profile-container.style-grid-active [class*="player"],
.instagram-profile-container.style-grid-active .plyr {
    content-visibility: hidden !important;
    display: none !important;
    width: 0px !important;
    height: 0px !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* FIXED SHIELD: Targets only the video poster panels, leaving your reaction emoji img tags 100% untouched */
body[class*="post"] img.js_lightbox-thumb, 
body[class*="video"] .post-img img, 
.post:has(video, iframe, .plyr--playing) .post-img img, 
.post:has(video, iframe, .plyr--playing) .post-media-image,
.post:has(video, iframe, .plyr--playing) .player-poster,
.post:has(video, iframe, .plyr--playing) [style*="background-image"] { 
    display: none !important; 
    visibility: hidden !important; 
    opacity: 0 !important; 
    height: 0px !important; 
}








/* ==========================================================================
   SECTION 5: INTERNAL CONTAINER ELEMENT ROUTING
   ========================================================================== */
.instagram-profile-container.style-grid-active .instagram-vertical-only-layout {
    display: none !important;
}

.instagram-profile-container.style-grid-active .instagram-grid-only-layout {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 2 !important;
}

.instagram-profile-container.style-grid-active .post-media-grid-cover {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 2 !important;
}

.instagram-profile-container.style-grid-active .pg-photos,
.instagram-profile-container.style-grid-active .pg-photos-tr,
.instagram-profile-container.style-grid-active .pg-photo,
.instagram-profile-container.style-grid-active .post-img {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}


/* ==========================================================================
   SECTION 6: ZOOM, SCALE, & THE 50/50 REFINED SPLIT
   ========================================================================== */
.instagram-profile-container.style-grid-active img,
.instagram-profile-container.style-grid-active [style*="background-image"],
.instagram-profile-container.style-grid-active [class*="poster"],
.instagram-profile-container.style-grid-active [class*="thumbnail"],
.instagram-profile-container.style-grid-active .pg-photo img,
.instagram-profile-container.style-grid-active .post-img img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    border-radius: 12px !important;
}

/* 50/50 IMAGE PIN: Forces fundraising, article, and product image components directly up to top 50% */
.instagram-profile-container.style-grid-active .post:has(.post-product-container, .post-funding-meta, .post-site-link, .post-article-meta, .post-funding, .post-article) img,
.instagram-profile-container.style-grid-active .post:has(.post-product-container, .post-funding-meta, .post-site-link, .post-article-meta, .post-funding, .post-article) [style*="background-image"],
.instagram-profile-container.style-grid-active .post:has(.post-product-container, .post-funding-meta, .post-site-link, .post-article-meta, .post-funding, .post-article) .post-img img {
    height: 50% !important;
    max-height: 50% !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    z-index: 3 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 50/50 METADATA PIN: Snaps text containers tightly down to the lower 50% layer of the card 
.instagram-profile-container.style-grid-active .post-product-container,
.instagram-profile-container.style-grid-active .post-funding-meta,
.instagram-profile-container.style-grid-active .post-site-link,
.instagram-profile-container.style-grid-active .post-article-meta,
.instagram-profile-container.style-grid-active .post-funding,
.instagram-profile-container.style-grid-active .post-article,
.instagram-profile-container.style-grid-active .post-funding-details,
.instagram-profile-container.style-grid-active .post-article-details {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    height: 50% !important;
    padding: 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 4 !important;
    background: var(--card-background, #ffffff) !important;
    border-radius: 0 0 12px 12px !important;
}


.instagram-profile-container.style-grid-active .post-product-container *,
.instagram-profile-container.style-grid-active .post-funding-meta *,
.instagram-profile-container.style-grid-active .post-site-link *,
.instagram-profile-container.style-grid-active .post-article-meta *,
.instagram-profile-container.style-grid-active .post-funding *,
.instagram-profile-container.style-grid-active .post-article * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-indent: 0 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: var(--text-main, #333333) !important;
    margin-bottom: 2px !important;
}

.instagram-profile-container.style-grid-active .ele_post_prod_name,
.instagram-profile-container.style-grid-active .funding-title,
.instagram-profile-container.style-grid-active .post-article-meta .title,
.instagram-profile-container.style-grid-active .post-media-meta .title,
.instagram-profile-container.style-grid-active .post-funding h3,
.instagram-profile-container.style-grid-active .post-article h3 {
    font-weight: bold !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 0 !important;
}

.instagram-profile-container.style-grid-active .ele_post_prod_price,
.instagram-profile-container.style-grid-active .funding-completion strong,
.instagram-profile-container.style-grid-active .post-funding strong,
.instagram-profile-container.style-grid-active .funding-amount {
    color: #876426 !important;
    font-weight: bold !important;
    font-size: 11px !important;
}

.instagram-profile-container.style-grid-active .post-product-container button,
.instagram-profile-container.style-grid-active .post-product-container hr,
.instagram-profile-container.style-grid-active .post-funding-meta button,
.instagram-profile-container.style-grid-active .post-funding-meta .progress,
.instagram-profile-container.style-grid-active .post-site-link .text,
.instagram-profile-container.style-grid-active .post-funding .progress {
    display: block !important;
}*/



/* ==========================================================================
   SECTION 7: PLAIN TEXT RECOVERY SYSTEM
   ========================================================================== */
/* FIXED: Forces text-only updates to un-hide strings inside raw text data blocks */
.instagram-profile-container.style-grid-active .post:not(:has(img, [style*="background-image"], .post-product-container, .post-funding-meta, .post-site-link, .post-article-meta, .post-funding, .post-article, [class*="poll"])) .post-text,
.instagram-profile-container.style-grid-active .post:not(:has(img, [style*="background-image"], .post-product-container, .post-funding-meta, .post-site-link, .post-article-meta, .post-funding, .post-article, [class*="poll"])) .post-msg,
.instagram-profile-container.style-grid-active .post:not(:has(img, [style*="background-image"], .post-product-container, .post-funding-meta, .post-site-link, .post-article-meta, .post-funding, .post-article, [class*="poll"])) .post-content,
.instagram-profile-container.style-grid-active .post:not(:has(img, [style*="background-image"], .post-product-container, .post-funding-meta, .post-site-link, .post-article-meta, .post-funding, .post-article, [class*="poll"])) .post-body-text {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    justify-content: center !important;
    align-items: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 15px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    overflow: hidden !important;
    word-break: break-word !important;
    text-indent: 0 !important; /* Strips header hide commands */
    color: var(--text-main, #333333) !important;
    background-color: rgba(125, 125, 125, 0.05) !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    z-index: 4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
}

.instagram-profile-container.style-grid-active .post .post-colored-text-wrapper,
.instagram-profile-container.style-grid-active .post [class*="colored"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    justify-content: center !important;
    align-items: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 15px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 4 !important;
    border-radius: 12px !important;
}

.instagram-profile-container.style-grid-active .post .post-colored-text-wrapper .post-text,
.instagram-profile-container.style-grid-active .post [class*="colored"] .post-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    background: transparent !important;
    text-indent: 0 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    z-index: 5 !important;
}

/* Safety Override: Only hides text if the grid cell contains a graphic element */
.instagram-profile-container.style-grid-active .post:has(img, [style*="background-image"]) .post-text:not(.post-colored-text-wrapper .post-text, [class*="colored"] .post-text, .post-funding-meta *, .post-article-meta *, .post-funding *, .post-article *),
.instagram-profile-container.style-grid-active .post:has(img, [style*="background-image"]) .post-msg,
.instagram-profile-container.style-grid-active .post:has(img, [style*="background-image"]) .post-content {
    display: block !important;
}


/* ==========================================================================
   SECTION 8: POLL LAYOUT OVERRIDE ISOLATION HARNESS (RE-REVISED)
   ========================================================================== */
/* POLL GRID INTERFACE: Renders real interactive poll layouts directly inside your active grid blocks */
.instagram-profile-container.style-grid-active .post:has(.poll-options, [class*="poll"]) {
    background: rgba(135, 100, 38, 0.03) !important;
    display: block !important;
}

.instagram-profile-container.style-grid-active .post:has(.poll-options, [class*="poll"]) .post-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
     width: calc(100% - 20px) !important;
    height: auto !important;
    text-indent: 0 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-align: left !important;
    color: var(--text-main, #333333) !important;
    z-index: 5 !important;
}

.instagram-profile-container.style-grid-active .post .poll-options,
.instagram-profile-container.style-grid-active .post [class*="poll-options"] {
    display: flex !important; /* Restores layout visibility inside the grid container */
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: absolute !important;
    top: 40px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100% - 40px) !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    z-index: 5 !important;
}


/* ==========================================================================
SECTION 9: SYSTEM HEADERS, BADGES, AND GLOBAL BLANKING CONTROLS
========================================================================== */
.instagram-profile-container.style-grid-active .profile-video-item-badge::after {
content: "▶" !important;
position: absolute !important;
top: 10px !important;
right: 12px !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: bold !important;
z-index: 10 !important;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8) !important;
}
.instagram-profile-container.style-grid-active .post-header img,
.instagram-profile-container.style-grid-active .post-header .avatar,
.instagram-profile-container.style-grid-active .post-header .post-avatar,
.instagram-profile-container.style-grid-active .post-header .post-author,
.instagram-profile-container.style-grid-active .post-header .post-meta,
.instagram-profile-container.style-grid-active .post-header .dropdown,
.instagram-profile-container.style-grid-active .post-header .post-settings,
.instagram-profile-container.style-grid-active .post-header .post-privacy,
.instagram-profile-container.style-grid-active .post-header .post-type,
.instagram-profile-container.style-grid-active .post-header .badge,
.instagram-profile-container.style-grid-active .post-header .pro-badge,
.instagram-profile-container.style-grid-active .post-header .verified-badge,
.instagram-profile-container.style-grid-active .post-header div,
.instagram-profile-container.style-grid-active .post-header span,
.instagram-profile-container.style-grid-active .post-header h6,
.instagram-profile-container.style-grid-active .post-footer,
.instagram-profile-container.style-grid-active [class*="post-footer"],
.instagram-profile-container.style-grid-active .post-comments,
.instagram-profile-container.style-grid-active .post-actions,
.instagram-profile-container.style-grid-active .post-title,
.instagram-profile-container.style-grid-active .blog-title,
.instagram-profile-container.style-grid-active .dropdown-menu {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
font-size: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.instagram-profile-container.style-grid-active .posts-stream .post-header,
.instagram-profile-container.style-grid-active .js_posts_stream .post-header,
.instagram-profile-container.style-grid-active [data-get="posts_profile"] .post-header,
.instagram-profile-container.style-grid-active div[id*="posts-stream"] .post-header {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 9999 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.instagram-profile-container.style-grid-active .posts-stream .valign.post-header *,
.instagram-profile-container.style-grid-active .js_posts_stream .valign.post-header *,
.instagram-profile-container.style-grid-active [data-get="posts_profile"] .valign.post-header * {
text-indent: -9999px !important;
font-size: 0 !important;
color: transparent !important;
display: none !important;
}
.instagram-profile-container.style-grid-active .posts-stream .valign.post-header .post-time a.js_moment,
.instagram-profile-container.style-grid-active .js_posts_stream .valign.post-header .post-time a.js_moment,
.instagram-profile-container.style-grid-active [data-get="posts_profile"] .valign.post-header .post-time a.js_moment,
.instagram-profile-container.style-grid-active div[id*="posts-stream"] .valign.post-header .post-time a.js_moment,
.instagram-profile-container.style-grid-active [data-get="posts_profile"] .valign.post-header a[href*="/posts/"] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0) !important;
text-indent: -9999px !important;
font-size: 0 !important;
color: transparent !important;
cursor: pointer !important;
z-index: 99999 !important; /* Kept highly elevated to preserve layout hit targets */
}





/* ==========================================================================
SECTION 10: RESPONSIVE MOBILE MEDIA ADJUSTMENTS
========================================================================== */
@media (max-width: 767px) {
.instagram-profile-container.style-grid-active div[id="posts-stream"] > ul,
.instagram-profile-container.style-grid-active .js_posts_stream > ul,
.instagram-profile-container.style-grid-active .posts-stream > ul,
.instagram-profile-container.style-grid-active [data-get="posts_profile"] > ul {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 3px !important;
}
.instagram-profile-container.style-grid-active .posts-stream .post,
.instagram-profile-container.style-grid-active .js_posts_stream .post,
.instagram-profile-container.style-grid-active [data-get="posts_profile"] .post,
.instagram-profile-container.style-grid-active div[id*="posts-stream"] .post {
aspect-ratio: 4 / 5 !important;
width: 100% !important;
height: 100% !important;
border-radius: 12px !important;
}
.instagram-profile-container.style-grid-active img,
.instagram-profile-container.style-grid-active [style*="background-image"],
.instagram-profile-container.style-grid-active .pg-photo img,
.instagram-profile-container.style-grid-active .post-img img {
object-fit: cover !important;
width: 100% !important;
height: 100% !important;
border-radius: 12px !important;
}
.instagram-profile-container.style-grid-active .post:has(.post-product-container, .post-funding-meta, .post-site-link, .post-article-meta) img,
.instagram-profile-container.style-grid-active .post:has(.post-product-container, .post-funding-meta, .post-site-link, .post-article-meta) [style*="background-image"],
.instagram-profile-container.style-grid-active .post:has(.post-product-container, .post-funding-meta, .post-site-link, .post-article-meta) .post-img img {
height: 50% !important;
border-radius: 12px 12px 0 0 !important;
}
}
/* ==========================================================================
SECTION 11: INTERACTIVE HOVER ACTIONS & OVERLAYS (REPAIRED & FULLY RESTORED)
========================================================================== */
/* REPAIRED: Forces the hover card over the top layer of absolute panels and text fields */
.instagram-profile-container.style-grid-active .post-stats {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 15px !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.6) !important;
z-index: 99999 !important; /* Extreme z-index overrides text fields and 50/50 blocks */
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 0.2s ease, visibility 0.2s ease !important;
pointer-events: none !important;
border-radius: 12px !important;
box-sizing: border-box !important;
}
/* Restores layout hover activation properties seamlessly */
.instagram-profile-container.style-grid-active li:hover .post-stats,
.instagram-profile-container.style-grid-active .post:hover .post-stats {
opacity: 1 !important;
visibility: visible !important;
}
/* Force inner text data strings and likes icons to render bright white */
.instagram-profile-container.style-grid-active .post-stats span,
.instagram-profile-container.style-grid-active .post-stats i {
color: #ffffff !important;
font-size: 15px !important;
font-weight: bold !important;
text-decoration: none !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ==========================================================================
SECTION 12: DYNAMIC STREAM LOADERS & SAFETY PATCHING
========================================================================== */
.instagram-profile-container .see-more,
.instagram-profile-container .js_see-more,
.instagram-profile-container .load-more {
display: block !important;
grid-column: span 3 !important;
width: 100% !important;
height: auto !important;
aspect-ratio: auto !important;
border: none !important;
padding: 15px !important;
margin: 25px 0 !important;
text-align: center !important;
background: transparent !important;
float: none !important;
clear: both !important;
}
.instagram-profile-container .see-more li,
.instagram-profile-container .see-more span {
display: inline-block !important;
width: auto !important;
height: auto !important;
aspect-ratio: auto !important;
}
.instagram-profile-container:not(.style-grid-active) .instagram-grid-only-layout {
display: none !important;
}
.instagram-profile-container:not(.style-grid-active) .instagram-vertical-only-layout {
display: block !important;
}




/* PROTECTION SHIELD: Ensures profile grid thumbnails are never hidden by Section 13 */
.instagram-profile-container.style-grid-active .post-media-grid-cover {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 100% !important;
    width: 100% !important;
}






/* Hide translator button explicitly inside active grid layout nodes */
.instagram-profile-container.style-grid-active .js_translator,
.instagram-profile-container.style-grid-active .post-sub-item.js_translator {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0px !important;
    height: 0px !important;
    padding: 0 !important;
    margin: 0 !important;
}








/* ==========================================================================
   SECTION 14: PROFILE MULTI-PHOTO STACKING & DOTS CONTROL KEYS
   ========================================================================== */
/* Position your indicator slider dots centered at the bottom of the grid cell block */
.instagram-profile-container.style-grid-active .instagram-grid-dots-wrapper {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 4px !important;
    z-index: 10 !important;
}

.instagram-profile-container.style-grid-active .grid-dot {
    width: 6px !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.instagram-profile-container.style-grid-active .grid-dot.active {
    background: #ffffff !important;
}

/* Ensure that when vertical mode runs, the native multi-photo template renders cleanly at 100% screen width */
.instagram-profile-container:not(.style-grid-active) .instagram-vertical-only-layout {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* Ensure the vertical container matches default behavior */
.instagram-profile-container:not(.style-grid-active) .instagram-vertical-only-layout {
    width: 100% !important;
    display: block !important;
}

/* Target only a single image post to mimic default native behavior */
.instagram-profile-container:not(.style-grid-active) .instagram-vertical-only-layout .pg_1x img {
    display: block !important;
    max-width: 100% !important; /* Prevents stretching past its original size */
    width: auto !important;     /* Lets small images stay their true width */
    height: auto !important;    /* Keeps the image aspect ratio perfect */
    margin: 0 auto !important;  /* Centers smaller images nicely in the feed */
}

/* Ensure multi-photo background divs aren't messed up by image rules */
.instagram-profile-container:not(.style-grid-active) .instagram-vertical-only-layout .pg_wrapper a {
    max-width: 100% !important;
}







/* ==========================================================================
   SECTION 15: PROFILE MULTI-PHOTO SEPARATED RENDERING SYSTEMS
   ========================================================================== */
/* GRID MODE ACTIVE: Hide Sngine's default multi-photo masonry layout inside grid view squares */
.instagram-profile-container.style-grid-active .instagram-vertical-only-layout {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* VERTICAL MODE ACTIVE: Hide the single image grid cover view when list view is active */
.instagram-profile-container:not(.style-grid-active) .instagram-grid-only-layout {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Force Sngine's default premium multi-photo layout gallery view to show up natively in vertical stream */
.instagram-profile-container:not(.style-grid-active) .instagram-vertical-only-layout {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    clear: both !important;
}

/* Position your indicator dots centered at the bottom of the grid cell block */
.instagram-profile-container.style-grid-active .instagram-grid-dots-wrapper {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 4px !important;
    z-index: 10 !important;
}

.instagram-profile-container.style-grid-active .grid-dot {
    width: 6px !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.instagram-profile-container.style-grid-active .grid-dot.active {
    background: #ffffff !important;
}



/* ==========================================================================
   SECTION 16: UN-COLLAPSE NATIVE PHOTO ARRANGEMENT IN VERTICAL VIEW
   ========================================================================== */
/* Force Sngine's native multi-photo row container to fill the layout width */
.instagram-profile-container:not(.style-grid-active) .instagram-vertical-only-layout .row,
.instagram-profile-container:not(.style-grid-active) .instagram-vertical-only-layout [class*="col-"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    position: relative !important;
}

/* Ensure the background graphics inside Sngine's native layout expand correctly */
.instagram-profile-container:not(.style-grid-active) .instagram-vertical-only-layout a.pg_photo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    background-size: cover !important;
    background-position: center !important;
}