.csi-outer{
  width:100%;
  display:flex;
  justify-content:center;
}

.csi-wrap{
  display:flex;
  gap:10px; /* reduced spacing */
  justify-content:center;
}

/* Base icon */
.csi-icon{
  border-radius:50%;
  border:1px solid #000;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.25s ease;
  flex:0 0 auto;
}

.csi-icon:hover{
  transform:translateY(-3px);
}

/* Sizes */
.csi-size-small .csi-icon{ width:36px; height:36px; }
.csi-size-small img{ width:16px; height:16px; }

.csi-size-medium .csi-icon{ width:44px; height:44px; }
.csi-size-medium img{ width:20px; height:20px; }

.csi-size-large .csi-icon{ width:56px; height:56px; }
.csi-size-large img{ width:26px; height:26px; }

/* Snapchat bigger */
.csi-snapchat img{
  width:30px !important;
  height:30px !important;
}

/* Mobile slider */
@media (max-width: 768px){
  .csi-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding-bottom:6px;
  }
  .csi-icon{
    scroll-snap-align:center;
  }
}

/* Bio Header */
.csi-bio{text-align:center;margin-bottom:16px;font-family:'Tajawal',sans-serif}
.csi-avatar{width:130px;height:130px;margin:0 auto 12px;border-radius:50%;overflow:hidden}
.csi-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.csi-title{font-size:28px;font-weight:700;margin-bottom:4px}
.csi-sub{font-size:14px;color:#555}

/* Avatar 3D UI Effect */
.csi-avatar{
  background:#fff;
  box-shadow:
    0 12px 28px rgba(0,0,0,.18),
    0 4px 10px rgba(0,0,0,.12);
  position:relative;
}

.csi-avatar::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
  pointer-events:none;
}

.csi-html{
  margin-top:14px;
  text-align:center;
}

/* MOBILE ICONS START */
/* Mobile: show only 6 icons width, keep icon size, rest scroll */
@media (max-width: 768px){
  .csi-outer{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    /* EXACTLY width of 6 icons (icon size is unchanged) */
    max-width: calc((44px * 6) + (12px * 5));
    margin-left: auto;
    margin-right: auto;
  }
  .csi-outer::-webkit-scrollbar{
    display: none;
  }
}
/* MOBILE ICONS END */

/* === CSI SUBTITLE FINAL FIX === */
.csi-sub{
  display:block;
  max-width:420px;
  margin:0 auto;
  text-align:center;
  white-space:normal;
}

/* === FORCE SHORTER (OVERRIDE EVERYTHING) === */
.csi-sub{
  max-width:260px !important;
}