.tcc-carousel-wrap{
    position:relative;
    isolation:isolate;
}
.tcc-carousel{
    --tcc-gap:24px;
    --tcc-item-width:180px;

    --tcc-avatar-size:150px;
    --tcc-avatar-border-width:0px;
    --tcc-avatar-border-color:#ffffff;

    --tcc-arrow-size:48px;
    --tcc-arrow-icon:20px;
    --tcc-arrow-offset:-6px;
    --tcc-arrow-radius:50%;
    --tcc-arrow-color:#ffffff;
    --tcc-arrow-bg:rgba(0,0,0,.7);
    --tcc-arrow-color-hover:#ffffff;
    --tcc-arrow-bg-hover:#000000;

    position:relative;
    direction:rtl;
    z-index:1;
}
.tcc-track{
    display:flex;
    flex-wrap:nowrap;
    gap:var(--tcc-gap);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:22px 14px 26px;
}
.tcc-track::-webkit-scrollbar{display:none}
.tcc-item{
    flex:0 0 var(--tcc-item-width);
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    scroll-snap-align:start;
    text-decoration:none;
    color:inherit;
    cursor:default;
}
a.tcc-item{ cursor:pointer; }
.tcc-avatar{
    width:var(--tcc-avatar-size);
    height:var(--tcc-avatar-size);
    border-radius:50%;
    overflow:hidden;
    background:#eef0f2;
    border:var(--tcc-avatar-border-width) solid var(--tcc-avatar-border-color);
    box-sizing:border-box;
    flex-shrink:0;
}
.tcc-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
}
.tcc-name{
    margin-top:14px;
    font-size:17px;
    font-weight:600;
    color:#ffffff;
    line-height:1.4;
}

/* Arrows — positioned with logical properties so they sit on the
   correct physical side automatically for RTL pages, and the glyph
   itself is mirrored for RTL so it visually points the right way. */
.tcc-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:var(--tcc-arrow-size);
    height:var(--tcc-arrow-size);
    border-radius:var(--tcc-arrow-radius);
    background:var(--tcc-arrow-bg);
    color:var(--tcc-arrow-color);
    border:0;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:var(--tcc-arrow-icon);
    line-height:1;
    z-index:5;
    transition:background-color .2s ease, color .2s ease;
}
.tcc-arrow:hover{
    background:var(--tcc-arrow-bg-hover);
    color:var(--tcc-arrow-color-hover);
}
.tcc-prev{ inset-inline-start:var(--tcc-arrow-offset); }
.tcc-next{ inset-inline-end:var(--tcc-arrow-offset); }
.tcc-carousel:dir(rtl) .tcc-arrow,
html[dir="rtl"] .tcc-carousel .tcc-arrow,
body[dir="rtl"] .tcc-carousel .tcc-arrow{
    transform:translateY(-50%) scaleX(-1);
}

/* Decorative character image */
.tcc-character{
    position:absolute;
    bottom:0;
    max-width:none;
    height:auto;
    z-index:2;
    pointer-events:none;
}
.tcc-character-right{ right:12px; }
.tcc-character-left{ left:12px; }

@media (max-width:767px){
    .tcc-character{ display:none; }
}