/* =========================================================
   AWTI DEVICES HUB
   GALLERY CSS
   File: assets/css/device-gallery.css
   ========================================================= */

.awti-device-single .awti-device-media-v11{
    position:relative;

    width:100%;
    max-width:620px;
    margin:0 auto;

    padding:10px;

    border:1px solid rgba(37,99,235,.18);
    border-left:3px solid #16a34a;
    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #ecfdf5 0%,
            #ffffff 48%,
            #eff6ff 100%
        );

    box-shadow:0 8px 28px rgba(15,23,42,.07);

    overflow:hidden;
}

.awti-device-single .awti-device-media-v11::before{
    content:"";

    position:absolute;
    top:0;
    left:0;
    right:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            #16a34a,
            #0d9488,
            #2563eb
        );

    z-index:10;
}


/* =========================================================
   MAIN IMAGE
   ========================================================= */

.awti-device-single .awti-v11-main{
    position:relative;

    min-height:420px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(37,99,235,.14);
    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            #f0fdf4,
            #ffffff,
            #eff6ff
        );

    overflow:hidden;
}

.awti-device-single .awti-v11-main img{
    width:100%;
    height:100%;
    max-height:520px;

    padding:18px;

    object-fit:contain;

    display:block;

    cursor:zoom-in;
}


/* =========================================================
   IMAGE COUNT
   ========================================================= */

.awti-device-single .awti-v11-count{
    position:absolute;

    top:12px;
    right:12px;

    z-index:5;

    padding:6px 10px;

    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;

    background:rgba(15,23,42,.78);

    color:#fff;

    font-size:12px;
    font-weight:800;
}


/* =========================================================
   NAVIGATION BUTTONS
   ========================================================= */

.awti-device-single .awti-v11-nav{
    position:absolute;

    top:50%;
    transform:translateY(-50%);

    z-index:5;

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:1px solid rgba(37,99,235,.14);
    border-radius:50%;

    background:#fff;

    color:#2563eb;

    font-size:25px;
    line-height:1;

    cursor:pointer;

    box-shadow:
        0 4px 14px rgba(15,23,42,.12);

    transition:
        transform .15s ease,
        background .15s ease,
        color .15s ease;
}

.awti-device-single .awti-v11-nav:hover{
    background:
        linear-gradient(
            135deg,
            #16a34a,
            #0d9488,
            #2563eb
        );

    color:#fff;

    transform:
        translateY(-50%)
        scale(1.05);
}

.awti-device-single .awti-v11-prev{
    left:12px;
}

.awti-device-single .awti-v11-next{
    right:12px;
}


/* =========================================================
   THUMBNAILS
   ========================================================= */

.awti-device-single .awti-v11-thumbs{
    display:flex;

    gap:8px;

    overflow-x:auto;

    padding:10px 2px 4px;

    scrollbar-width:thin;
}

.awti-device-single .awti-v11-thumb{
    flex:0 0 62px;

    width:62px;
    height:62px;

    padding:2px;

    border:2px solid transparent;
    border-radius:10px;

    background:#fff;

    cursor:pointer;

    overflow:hidden;

    transition:
        border-color .15s ease,
        transform .15s ease;
}

.awti-device-single .awti-v11-thumb:hover{
    transform:translateY(-1px);

    border-color:
        rgba(37,99,235,.35);
}

.awti-device-single .awti-v11-thumb img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    border-radius:7px;
}

.awti-device-single .awti-v11-thumb.is-active{
    border-color:#2563eb;

    box-shadow:
        0 0 0 2px rgba(37,99,235,.10);
}


/* =========================================================
   GALLERY ACTIONS
========================================================= */

.awti-device-single .awti-v11-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;

    margin-top:8px;
}

.awti-device-single .awti-v11-action{
    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:1px solid rgba(37,99,235,.14);
    border-radius:50%;

    background:#fff;

    color:#2563eb;

    font-size:19px;
    line-height:1;

    cursor:pointer;

    box-shadow:
        0 3px 12px rgba(15,23,42,.07);

    transition:
        transform .15s ease,
        background .15s ease,
        color .15s ease;
}

.awti-device-single .awti-v11-action:hover{
    transform:translateY(-1px);

    background:
        linear-gradient(
            135deg,
            #ecfdf5,
            #eff6ff
        );

    color:#15803d;
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.awti-device-single .awti-v11-lightbox{
    position:fixed;

    inset:0;

    z-index:999999;

    display:none;
    align-items:center;
    justify-content:center;

    padding:24px;

    background:rgba(0,0,0,.92);
}

.awti-device-single .awti-v11-lightbox.is-open{
    display:flex;
}

.awti-device-single .awti-v11-lightbox img{
    max-width:94vw;
    max-height:88vh;

    width:auto;
    height:auto;

    object-fit:contain;
}


/* =========================================================
   LIGHTBOX CLOSE
   ========================================================= */

.awti-device-single .awti-v11-close{
    position:absolute;

    top:18px;
    right:18px;

    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    border-radius:50%;

    background:#fff;

    color:#0f172a;

    font-size:28px;
    line-height:1;

    cursor:pointer;

    box-shadow:
        0 5px 18px rgba(0,0,0,.25);
}


/* =========================================================
   LIGHTBOX NAVIGATION
   ========================================================= */

.awti-device-single .awti-v11-lb-nav{
    position:absolute;

    top:50%;
    transform:translateY(-50%);

    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    border-radius:50%;

    background:#fff;

    color:#2563eb;

    font-size:28px;
    line-height:1;

    cursor:pointer;
}

.awti-device-single .awti-v11-lb-prev{
    left:18px;
}

.awti-device-single .awti-v11-lb-next{
    right:18px;
}


/* =========================================================
   IMAGE PLACEHOLDER
   ========================================================= */

.awti-device-single .awti-device-image-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:300px;

    width:100%;

    color:#16a34a;

    font-size:54px;

    background:
        linear-gradient(
            135deg,
            #ecfdf5,
            #ffffff,
            #eff6ff
        );
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

    .awti-device-single .awti-device-media-v11{
        padding:7px;
        border-radius:15px;
    }

    .awti-device-single .awti-v11-main{
        min-height:300px;
        border-radius:12px;
    }

    .awti-device-single .awti-v11-main img{
        max-height:370px;
        padding:12px;
    }

    .awti-device-single .awti-v11-nav{
        width:38px;
        height:38px;

        font-size:22px;
    }

    .awti-device-single .awti-v11-thumb{
        flex-basis:56px;

        width:56px;
        height:56px;
    }

    .awti-device-single .awti-v11-lightbox{
        padding:10px;
    }

    .awti-device-single .awti-v11-action{
        width:38px;
        height:38px;
    }

}