/* =========================================================
   GLOBAL
========================================================= */

*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html{
    scroll-behavior:smooth;
}

body{

    margin:0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        radial-gradient(
            circle at 50% -10%,
            #182b72 0,
            #080d2b 38%,
            #020617 75%
        );

    color:#fff;

    min-height:100vh;

}


/* =========================================================
   PAGE
========================================================= */

.page{

    width:100%;

    max-width:1000px;

    margin:auto;

    padding:14px 16px 50px;

}


/* =========================================================
   TOP BAR
========================================================= */

.top-bar{

    height:56px;

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:6px;

}

.back-btn{

    width:42px;
    height:42px;

    border-radius:50%;

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

    text-decoration:none;

    color:white;

    font-size:27px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.08);

    transition:.2s;

}

.back-btn:active{

    transform:scale(.92);

}


.top-title{

    flex:1;

    min-width:0;

}

.top-title h1{

    margin:0;

    font-size:19px;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.top-title span{

    display:block;

    margin-top:3px;

    color:#aab5d6;

    font-size:12px;

}


.top-actions{

    display:flex;

    gap:8px;

}


.icon-btn{

    width:42px;
    height:42px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.12);

    background:
        rgba(255,255,255,.08);

    color:#fff;

    font-size:21px;

    cursor:pointer;

    display:flex;

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

    transition:.2s;

}

.icon-btn:active{

    transform:scale(.90);

}

.icon-btn.saved{

    color:#ff315d;

    background:
        rgba(255,49,93,.13);

}


/* =========================================================
   MAIN CARD
========================================================= */

.listing-card{

    background:

        linear-gradient(
            180deg,
            rgba(16,27,71,.98),
            rgba(4,9,31,.98)
        );

    border:

        1px solid
        rgba(255,255,255,.08);

    border-radius:26px;

    overflow:hidden;

    box-shadow:

        0 30px 80px
        rgba(0,0,0,.42);

}


/* =========================================================
   IMAGE AREA
========================================================= */

.gallery{

    position:relative;

    padding:10px 10px 0;

}


/* Main image */

.main-image{

    position:relative;

    width:100%;

    height:440px;

    overflow:hidden;

    border-radius:20px;

    background:#050a1e;

}


.main-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:
        opacity .25s ease,
        transform .35s ease;

}


.main-image.loading img{

    opacity:.5;

}


/* Image arrows */

.gallery-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:42px;
    height:42px;

    border-radius:50%;

    border:none;

    background:
        rgba(0,0,0,.58);

    color:#fff;

    font-size:25px;

    cursor:pointer;

    z-index:5;

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

    backdrop-filter:blur(8px);

}

.gallery-arrow.left{

    left:22px;

}

.gallery-arrow.right{

    right:22px;

}

.gallery-arrow:active{

    transform:
        translateY(-50%)
        scale(.90);

}


/* =========================================================
   IMAGE COUNTER
========================================================= */

.image-counter{

    position:absolute;

    right:22px;
    top:22px;

    background:
        rgba(0,0,0,.62);

    border:
        1px solid
        rgba(255,255,255,.14);

    padding:6px 10px;

    border-radius:20px;

    font-size:12px;

    color:#fff;

    backdrop-filter:blur(8px);

}


/* =========================================================
   DOTS
========================================================= */

.dots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:7px;

    margin:

        -21px
        0
        13px;

    position:relative;

    z-index:10;

}

.dots span{

    width:8px;
    height:8px;

    border-radius:50%;

    background:
        rgba(255,255,255,.48);

    transition:.25s;

}

.dots span.active{

    width:22px;

    border-radius:10px;

    background:
        #593cff;

}


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

.thumbnail-wrapper{

    width:100%;

    overflow-x:auto;

    padding:

        0
        2px
        10px;

    scrollbar-width:none;

}

.thumbnail-wrapper::-webkit-scrollbar{

    display:none;

}

.thumbnails{

    display:flex;

    gap:8px;

    width:max-content;

}


.thumbnail{

    width:88px;
    height:64px;

    flex-shrink:0;

    border-radius:12px;

    overflow:hidden;

    border:
        2px solid
        transparent;

    background:#080d25;

    padding:0;

    cursor:pointer;

    opacity:.65;

    transition:.2s;

}

.thumbnail img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}

.thumbnail.active{

    border-color:#6844ff;

    opacity:1;

    box-shadow:
        0 0 0 2px
        rgba(104,68,255,.2);

}


/* =========================================================
   CONTENT
========================================================= */

.content{

    padding:
        4px
        20px
        22px;

}


/* =========================================================
   PRICE
========================================================= */

.price-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-top:3px;

}

.price{

    font-size:27px;

    font-weight:800;

    letter-spacing:.2px;

}

.price small{

    font-size:13px;

    color:#9aa6c7;

    font-weight:400;

}


/* =========================================================
   VERIFIED SELLER
========================================================= */

.verified{

    display:flex;

    align-items:center;

    gap:7px;

    color:#15e875;

    font-size:13px;

    font-weight:600;

    margin-top:7px;

}

.verified-dot{

    width:15px;
    height:15px;

    border-radius:50%;

    background:#14d86b;

    color:#031b0d;

    display:flex;

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

    font-size:10px;

    font-weight:bold;

}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.actions{

    display:flex;

    gap:10px;

    margin-top:15px;

}

.action-btn{

    flex:1;

    min-height:48px;

    border:none;

    border-radius:13px;

    color:#fff;

    text-decoration:none;

    display:flex;

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

    gap:8px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

}

.action-btn:active{

    transform:scale(.97);

}

.call{

    background:
        linear-gradient(
            135deg,
            #174cff,
            #2d75ff
        );

}

.whatsapp{

    background:
        linear-gradient(
            135deg,
            #08b95c,
            #18d878
        );

}


/* =========================================================
   INFO CARDS
========================================================= */

.info-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    margin-top:15px;

    border-radius:17px;

    background:
        rgba(255,255,255,.045);

    border:
        1px solid
        rgba(255,255,255,.07);

    overflow:hidden;

}

.info-item{

    min-height:72px;

    padding:
        12px
        8px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    border-right:
        1px solid
        rgba(255,255,255,.07);

}

.info-item:last-child{

    border-right:none;

}

.info-icon{

    font-size:17px;

    margin-bottom:6px;

}

.info-value{

    font-size:12px;

    font-weight:700;

    color:#fff;

}

.info-label{

    margin-top:3px;

    color:#8792b3;

    font-size:10px;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.section{

    margin-top:16px;

    padding:17px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(18,30,77,.75),
            rgba(6,12,38,.9)
        );

    border:
        1px solid
        rgba(255,255,255,.07);

}

.section-title{

    margin:0 0 12px;

    font-size:17px;

    font-weight:700;

}

.description{

    color:#d8def2;

    font-size:13px;

    line-height:1.65;

}

.description p{

    margin:
        0
        0
        14px;

}

.description p:last-child{

    margin-bottom:0;

}

.amharic{

    font-family:
        "Noto Sans Ethiopic",
        Arial,
        sans-serif;

}


/* =========================================================
   SPECIFICATIONS
========================================================= */

.specifications{

    margin-top:16px;

    padding:17px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(18,30,77,.75),
            rgba(6,12,38,.9)
        );

    border:
        1px solid
        rgba(255,255,255,.07);

}

.spec-title{

    font-size:18px;

    font-weight:700;

    margin-bottom:10px;

}

.spec-row{

    display:grid;

    grid-template-columns:
        22px
        1fr
        auto;

    align-items:center;

    min-height:31px;

    border-bottom:
        1px solid
        rgba(255,255,255,.075);

    column-gap:7px;

}

.spec-row:last-child{

    border-bottom:none;

}

.spec-icon{

    color:#aab6d8;

    font-size:13px;

}

.spec-name{

    color:#aab4ce;

    font-size:12px;

}

.spec-value{

    color:#fff;

    font-size:12px;

    font-weight:600;

    text-align:right;

}


/* =========================================================
   SELLER CARD
========================================================= */

.seller-card{

    margin-top:16px;

    padding:14px;

    display:flex;

    align-items:center;

    gap:12px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(17,31,78,.9),
            rgba(6,12,39,.95)
        );

    border:
        1px solid
        rgba(255,255,255,.08);

}

.seller-avatar{

    width:53px;
    height:53px;

    border-radius:50%;

    object-fit:cover;

    border:
        2px solid
        rgba(255,255,255,.18);

}

.seller-info{

    flex:1;

    min-width:0;

}

.seller-name{

    font-size:15px;

    font-weight:700;

}

.seller-meta{

    margin-top:4px;

    color:#9ca8c6;

    font-size:11px;

}

.seller-rating{

    margin-top:5px;

    font-size:12px;

    color:#ffd21c;

}

.seller-btn{

    border:none;

    color:white;

    background:
        linear-gradient(
            135deg,
            #4230ff,
            #683cff
        );

    border-radius:10px;

    padding:
        10px
        13px;

    font-size:11px;

    font-weight:700;

    cursor:pointer;

}


/* =========================================================
   SHARE MODAL
========================================================= */

.share-modal{

    position:fixed;

    inset:0;

    background:
        rgba(0,0,0,.65);

    display:none;

    align-items:flex-end;

    justify-content:center;

    z-index:99999;

    backdrop-filter:blur(8px);

}

.share-modal.show{

    display:flex;

}

.share-box{

    width:100%;

    max-width:520px;

    background:
        linear-gradient(
            180deg,
            #101b45,
            #050a22
        );

    border-radius:
        25px
        25px
        0
        0;

    padding:
        22px
        20px
        30px;

    border:
        1px solid
        rgba(255,255,255,.1);

    box-shadow:
        0 -20px 60px
        rgba(0,0,0,.5);

}

.share-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:18px;

}

.share-header h3{

    margin:0;

    font-size:19px;

}

.share-close{

    width:38px;
    height:38px;

    border:none;

    border-radius:50%;

    background:
        rgba(255,255,255,.08);

    color:#fff;

    font-size:24px;

    cursor:pointer;

}

.share-items{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:10px;

}

.share-item{

    min-height:50px;

    border:none;

    border-radius:13px;

    background:
        rgba(255,255,255,.07);

    color:#fff;

    text-decoration:none;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    font-size:14px;

    cursor:pointer;

}

.share-item:hover{

    background:
        rgba(78,60,255,.35);

}


/* =========================================================
   TOAST
========================================================= */

.toast{

    position:fixed;

    left:50%;

    bottom:25px;

    transform:
        translate(-50%,20px);

    background:#111827;

    color:#fff;

    padding:
        11px
        17px;

    border-radius:30px;

    font-size:13px;

    opacity:0;

    pointer-events:none;

    transition:.3s;

    z-index:100000;

    border:
        1px solid
        rgba(255,255,255,.1);

}

.toast.show{

    opacity:1;

    transform:
        translate(-50%,0);

}


/* =========================================================
   DESKTOP
========================================================= */

@media(min-width:760px){

    .page{

        padding-top:22px;

    }

    .listing-card{

        border-radius:30px;

    }

    .gallery{

        padding:14px 14px 0;

    }

    .main-image{

        height:540px;

    }

    .content{

        padding:
            7px
            26px
            28px;

    }

}


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

@media(max-width:600px){

    .page{

        padding:
            6px
            9px
            35px;

    }

    .top-bar{

        height:52px;

    }

    .top-title h1{

        font-size:16px;

    }

    .top-title span{

        font-size:10px;

    }

    .icon-btn,
    .back-btn{

        width:38px;
        height:38px;

    }

    .listing-card{

        border-radius:22px;

    }

    .gallery{

        padding:
            8px
            8px
            0;

    }

    .main-image{

        height:285px;

        border-radius:17px;

    }

    .gallery-arrow{

        width:36px;
        height:36px;

        font-size:20px;

    }

    .gallery-arrow.left{

        left:17px;

    }

    .gallery-arrow.right{

        right:17px;

    }

    .image-counter{

        top:17px;
        right:17px;

    }

    .thumbnail{

        width:75px;
        height:56px;

        border-radius:10px;

    }

    .content{

        padding:
            3px
            13px
            18px;

    }

    .price{

        font-size:23px;

    }

    .actions{

        gap:8px;

    }

    .action-btn{

        min-height:46px;

        font-size:13px;

    }

    .info-grid{

        grid-template-columns:
            repeat(2,1fr);

    }

    .info-item:nth-child(2){

        border-right:none;

    }

    .info-item:nth-child(1),
    .info-item:nth-child(2){

        border-bottom:
            1px solid
            rgba(255,255,255,.07);

    }

    .section,
    .specifications{

        padding:14px;

    }

    .seller-card{

        flex-wrap:wrap;

    }

    .seller-btn{

        margin-left:auto;

    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media(max-width:380px){

    .main-image{

        height:255px;

    }

    .price{

        font-size:21px;

    }

    .thumbnail{

        width:68px;
        height:52px;

    }

}