/* ========================================
   MOBILE NAVIGATION BUTTONS - ADDED STYLES
   ======================================== */

/* Base styles for mobile - visible buttons with arrows */
.media__navigation {
    position: fixed;
    bottom: 22%;
    /* transform: translateY(-50%); */
    z-index: 100;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.media__navigation:active {
    transform: translateY(-50%) scale(0.92);
    background-color: rgba(255, 255, 255, 1);
}

.media__navigation[aria-disabled=true] {
    opacity: 0.3;
    pointer-events: none;
}

/* Arrow images */
.media__navigation--prev {
    left: 12px;
    background-image: url('../images/common/arrow-back.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px auto;
}

.media__navigation--next {
    right: 12px;
    background-image: url('../images/common/arrow-next.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px auto;
}

/* Desktop: Override to transparent overlay with custom cursor */
@media screen and (min-width: 835px) {
    .media__navigation {
        position: absolute;
        width: 50%;
        height: 100%;
        top: 0;
        transform: none;
        border-radius: 0;
        background-color: transparent;
        background-image: none;
        border: none;
        box-shadow: none;
        z-index: 1;
        transition: opacity .4s;
        opacity: 1;
    }

    .media__navigation:active {
        transform: none;
        background-color: transparent;
    }

    .work.image-slide-active .media__navigation {
        z-index: 2;
    }

    .media__navigation[aria-disabled=true] {
        visibility: hidden;
    }

    .media__navigation--prev {
        left: 0;
        cursor: url("../images/common/icon-arrow_prev.svg"), pointer;
        background-image: none;
    }

    .media__navigation--next {
        left: 50%;
        right: auto;
        cursor: url("../images/common/icon-arrow_next.svg"), pointer;
        background-image: none;
    }
}