/* =====================================================
   MBazar marketplace layout
   ===================================================== */


*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

line-height:1.4;
backgroung: black;
}


/* =====================================================
   AD CARD
   ===================================================== */

.ad-card{

background:white;
border-radius:12px;
border:1px solid #e4e6eb;
margin: 8px;
overflow:hidden;
transition:box-shadow .2s ease;
}

.ad-card:hover{
box-shadow:0 6px 20px rgba(0,0,0,.08);
}


.ad-card.frame-green{
    border-color:green;
    background:#BAFFBA;
}

.ad-card.frame-gold{
    border-color:yellow;
    background:#FFFF8F;
}

.ad-card.frame-blue{
    border-color:#00FFFF;
    background:#ABC7DE;
}

.ad-card.frame-silver{
    border-color:silver;
    background:#fff;
}



/* =====================================================
   GRID LAYOUT
   ===================================================== */

.ad-row{

display:grid;
grid-template-columns:220px 1fr;

min-height:10px;
}


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

.ad-image-wrapper{
position:relative;
background:#f5f5f7;

}



/* =====================================================
   FAVORITE
   ===================================================== */

.favorite-btn{
z-index:10; 
position:absolute;

top:25px;
left:50%;
transform:translate(-50%, -50%);

width:50px;
height:50px;

border-radius:50%;
border:none;

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

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

cursor:pointer;
}



.favorite-btn i{
color:#ffa500;
font-size:16px;
}


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

.ad-content{

display:flex;
flex-direction:column;

padding:4px;

gap:4px;
}


/* =====================================================
   HEADER
   ===================================================== */

.ad-header{

display:flex;
justify-content:space-between;
gap:8px;
}

.ad-title{
display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
overflow:hidden;

font-size:1rem;
font-weight:600;
line-height:1.25;
}

.ad-title a{
text-decoration: underline;
color:#1c1e21;
}

.ad-title a:hover{
text-decoration: underline;
}

.ad-views{
font-size:.85rem;
color: blue;
}


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

.ad-description{

font-size:.95rem;
color:#444;

display:-webkit-box;
-webkit-line-clamp:8;
-webkit-box-orient:vertical;
overflow:hidden;
}


/* =====================================================
   FOOTER
   ===================================================== */

.ad-footer{

display:flex;
align-items:center;
gap:8px;

flex-wrap:wrap;

margin-top:auto;
}

.ad-price{

font-size:1.15rem;
font-weight:700;
color:#111;
}

.ad-location{

font-size:.85rem;
color:#666;
}

.ad-top {
font-size:.75rem;
color: yellow;
font-weight:900;
border: 1px solid darkgray;
border-radius: 6px;
background: linear-gradient(135deg, #ff7a18 0%, #ff5a00 50%, #cc3d00 100%);
padding: 0 3px;
}


.ad-carousel {
    position: relative;
    overflow: hidden;
    max-width: 320px;
    height: 240px;
}

.ad-carousel-slide {
    display: none;
    width: 100%;
    height: 100%;
}

.ad-carousel-slide.active {
    display: block;
}

.ad-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ad-carousel-prev,
.ad-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0);
    color: white;
    border: 0;
    padding: 100% 10px;
    margin: 0;
    cursor: pointer;
    z-index: 10;
font-size:1.2rem;
font-weight:900;
}

.ad-carousel-prev { left: 1px; }
.ad-carousel-next { right: 1px; }




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

@media (max-width:768px){

.ad-row{
grid-template-columns:1fr;
}

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

.ad-description{
font-size:.95rem;
color:#444;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

.ad-carousel {
    position: relative;
    overflow: hidden;
    max-width: 800px;
    height: 240px;
}

.ad-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ad-header{
flex-direction:column;
gap:2px;
}

.ad-footer{
gap:3px;
}





}