/**
 * Frontend styles for CD Smart Image Rotator
 * v1.0.5 – Clean version for photographs (removed pixel-art sharpening)
 */

/* === CD Smart Image Rotator === */

.cd-rotator {
    position: relative;
    overflow: hidden;
    border-radius: 0px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    background: transparent;
    margin: 0 auto;     /* Let Elementor column/widget control the spacing */
    display: block;
}

.cd-rotator img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* default – overridden inline by shortcode fit= attribute */
    display: block;

    /* Removed crisp-edges / translateZ – those made real photos look jagged and crunchy */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Explicitly prevent any accidental hover scaling (kept for safety) */
.cd-rotator:hover img {
    transform: none;
}

/* Caption overlay */
.cd-rotator-caption {
    position: absolute;
    bottom: 5px;                    /* lifted slightly so it doesn't touch the very edge */
    left: 50%;
    transform: translateX(-50%);     /* perfectly centred pill */
    background: rgba(0, 0, 0, 0.65);
    color: #cdcdcd;                  /* exact light gray from your Elementor colour picker */
    padding: 5px 14px;
    font-size: 12px;                 /* matches your setting */
    font-weight: 400;
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.3;
    text-align: center;
    border-radius: 6px;              /* nice rounded badge look */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
    z-index: 10;
    white-space: nowrap;             /* keeps short captions on one line */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* subtle depth */
}

@media (max-width: 600px) {
    .cd-rotator-caption {
        font-size: 13px;
        padding: 10px 14px;
    }
}

.cd-rotator-notice {
    padding: 15px 20px;
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    color: #856404;
    font-size: 14px;
}

/* ====================== START: SMOOTH IMAGE FADE-IN (AJAX ONLY) ====================== */
/* Only applies to AJAX-loaded rotators so normal shortcodes are not affected */

.cd-rotator-ajax img {
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
}

.cd-rotator-ajax img.loaded {
    opacity: 1;
}

/* Make sure captions are always visible */
.cd-rotator .cd-rotator-caption {
    opacity: 1;
}
/* ====================== END: SMOOTH IMAGE FADE-IN (AJAX ONLY) ====================== */