#preroll-ad-wrapper {
    /* Ensure the wrapper spans the full width of the content area */
    width: 100%;
    margin: 0 auto;
}

#preroll-ad-spot {
    /* Outer container for the ad unit and status */
    padding: 20px 0;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    /* text-align: center; REMOVED to prevent centering issues */
}

/* ------------------- IFRAME WRAPPER STYLES ------------------- */
#preroll-iframe {
    /* This DIV now carries the ID used for CSS sizing */
    display: block; 
    width: 300px; 
    height: 250px;
    /* margin: 0 auto 15px auto; REMOVED the auto margins */
    margin-bottom: 15px; /* Keeps the spacing below the ad */
    border: none;
}


/* ------------------- LOADING BAR STYLES ------------------- */
#loading-bar-status {
    /* Set the desired height for the entire status area */
    height: 2rem; 
    /* Ensures this entire status block is positioned below the iframe wrapper */
    /* text-align: center; REMOVED to prevent centering issues, 
       but if you want the text/bar centered, you must re-add this 
       or target specific children */
}

#loading-bar-container {
    /* Container for the progress bar animation */
    width: 80%; 
    max-width: 400px; 
    height: 10px; 
    background-color: #e0e0e0;
    margin: 5px auto; /* Kept auto margins here to center the bar container */
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

#loading-bar {
    /* The actual animated progress bar */
    width: 100%; 
    height: 100%;
    
    background-color: #4CAF50; 
    
    /* Add animated stripes for the "loading" visual */
    background-image: linear-gradient(
        -45deg, 
        rgba(255, 255, 255, .2) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(255, 255, 255, .2) 50%, 
        rgba(255, 255, 255, .2) 75%, 
        transparent 75%, 
        transparent
    );
    background-size: 40px 40px; 
    
    animation: full-bar-stripe 1.5s linear infinite;
}

@keyframes full-bar-stripe {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 40px 0;
    }
}

#ad-timer {
    font-size: 1.1em;
    color: #333;
    /* Adjusted margin for better fit */
    margin-top: 5px; 
}

#post-content-container {
    /* Content is initially hidden via inline style in PHP and revealed by JS */
}