/* ============================================================
   Divi Carousel Gallery v3 — Frontend Styles
   ============================================================ */

/* Outer container (positions arrows relative to it) */
.dcg-carousel-outer {
    position: relative;
    width: 100%;
}

/* Wrapper: clipping container */
.dcg-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    user-select: none;
}

/* Track: positioning context for slides */
.dcg-track {
    position: absolute;
    inset: 0;
}

/* Individual slide */
.dcg-slide {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    will-change: left, width, height, filter, opacity;
}

.dcg-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.dcg-slide.dcg-active {
    filter: blur(0px) !important;
    opacity: 1 !important;
    z-index: 10;
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.30) !important;
}

/* Soft gradient edges */
.dcg-overlay-left,
.dcg-overlay-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 14%;
    pointer-events: none;
    z-index: 20;
}
.dcg-overlay-left {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.00) 100%) !important;
}
.dcg-overlay-right {
    right: 0;
    background: linear-gradient(to left,  rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.00) 100%) !important;
}

/* Navigation arrows */
.dcg-arrow {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    z-index: 25;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.dcg-arrow:hover {
    background: var(--dcg-arrow-hover-bg, rgba(30,30,30,0.85)) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
.dcg-arrow:hover svg {
    stroke: var(--dcg-arrow-hover-icon, #ffffff) !important;
}

/* Placeholder */
.dcg-no-images {
    padding: 2rem;
    text-align: center;
    color: #999;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .dcg-overlay-left,
    .dcg-overlay-right { width: 8%; }
    .dcg-arrow { transform: scale(0.85); }
}