.trend-wrapper{
    position:relative;
}

/* horizontal list */
.trend-stock{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:6px 0;
    scroll-behavior:smooth;
    scrollbar-width:none;
}

.trend-stock::-webkit-scrollbar{
    display:none;
}

/* cards */
.trend-item{
    flex:0 0 auto;
    width:130px;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:6px;
    border-radius:8px;
    border:1px solid #e5e7eb;
    overflow:hidden;   /* prevent chart overflow */
}

/* chart container */
.trend-chart{
    width:100%;
    height:60px;
    display:block;
}

.subscribe-box{
    background:#410093;
    width:120px;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* overlay arrows */
.trend-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:46px;
    border:none;
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(4px);
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
    border-radius:6px;
    cursor:pointer;
    z-index:10;
    opacity:0;
    transition:0.2s;
}

/* show arrows on hover */
.trend-wrapper:hover .trend-arrow{
    opacity:1;
}

.trend-arrow.left{
    left:0;
}

.trend-arrow.right{
    right:0;
}

.trend-arrow.hidden{
    display:none;
}

/* mobile */
@media(max-width:768px){
.trend-arrow{
    display:none;
}
}