/* =========================================================
   HW TOOLS LIST (APP STYLE)
========================================================= */

.hw-tools-list{
  display:flex;
  flex-direction:column;
  margin: 0px 0;
}

a.hw-tool-row {
    margin: 5px 0;
    border-radius: 10px;
    padding: 10px 12px;
    justify-content: space-between;
    text-decoration: none;
    color: #883ca6;
    /* border-bottom: 1px solid #e5e7eb; */
    background: #f3e8ff;
    transition: all .2s ease;
    margin: 5px 2px;
    border-radius: 12px;
}

/* ===== ROW ===== */
.hw-tool-row{
  .hw-tool-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 14px;
    text-decoration: none;
    color: #883ca6;
    /* border-bottom: 1px solid #e5e7eb; */
    background: #f3e8ff;
    transition: all .2s ease;
    margin: 10px 0;
    border-radius: 12px;
}
}

/* alternating background */
.hw-tool-row.alt {
    background: #883ca6;
    color: #fff;
}

/* hover */
.hw-tool-row:hover {
    background: #e8d5ff3d;
    color: #000;
}

/* remove last border */
.hw-tool-row:last-child{
  border-bottom:none;
}

/* ===== LEFT SIDE ===== */
.hw-tool-left{
  display:flex;
  align-items:center;
  gap:14px;
}

/* ===== ICON ===== */
/*.hw-tool-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  background:#e2e8f0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
} */

/* ===== TITLE ===== */
.hw-tool-title{
  font-size:12px;
  font-weight:700;
  line-height:1.2;
}

/* ===== ARROW ===== */
.hw-tool-arrow {
    font-size: 14px;
    color: #faf2ff;
    flex-shrink: 0;
    background: #5e196e70;
    border-radius: 15px;
    padding: 7px 8px 9px;
    margin-left: auto;
    font-weight: 700;
    line-height: 0em;
}

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

@media (max-width:768px){

  .hw-tool-row{
    padding:18px 14px;
  }

  .hw-tool-title{
    font-size:12px;
  }
}

/* SVG inside icon */
.hw-tool-icon {
    width: 36px;           /* Adjust size as needed */
    height: 36px;
    background: #fff;      /* Your white diamond color */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    fill: #883ca6;

    /* 1. Turn the square into a diamond */
    transform: rotate(45deg); 
    
    /* Optional: spacing so the corners don't hit other elements */
    margin: 0px; 
}

.hw-tool-icon svg {
    /* 2. Turn the icon back so it looks "normal" */
    transform: rotate(-45deg); 
    
    width: 24px;  /* Adjust icon size inside diamond */
    height: 24px;
}