/* Core Overlay & Wrapper */
#colorbox, #cboxOverlay, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden; }
#cboxOverlay { position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.9); backdrop-filter: blur(8px); }
#cboxContent { overflow: visible; position: relative; background: transparent; }
#cboxLoadedContent { overflow: hidden !important; border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: 100% !important; height: auto !important; }

/* Desktop Navigation Buttons */
#cboxClose, #cboxPrevious, #cboxNext {
    position: fixed; top: 20px; background-color: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2); width: 44px; height: 44px; border-radius: 50%;
    cursor: pointer; text-indent: -9999px; transition: all 0.2s ease; z-index: 10000;
}
#cboxClose { right: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat center; background-size: 20px; }
#cboxPrevious { left: 20px; top: 50%; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E") no-repeat center; background-size: 20px; }
#cboxNext { right: 20px; top: 50%; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E") no-repeat center; background-size: 20px; }

/* Responsive Fix for Mobile (Crucial) */
@media only screen and (max-width: 768px) {
    .resize_img {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
    }
    #cboxPrevious, #cboxNext { top: auto; bottom: 20px; transform: none; }
    #cboxPrevious { left: 20px; }
    #cboxNext { right: 80px; }
    #cboxClose { top: auto; bottom: 20px; right: 20px; background-color: #d93025; }
}

/* Base Image Styling in Posts */
.resize_img {
    border: 1px solid #ddd;
    padding: 3px;
    background: #fff;
    border-radius: 4px;
    max-width: 100%; /* Important to prevent horizontal scroll */
    height: auto;
    cursor: zoom-in;
}