.read-more-container{
    display: flex;
    border-bottom: 1px solid var(--Cat-dark-gray, #C0C0C0);


}

.read-more-content {
  display: none;
  padding-top: 10px; /* Keep existing spacing */
  clear: both; /* Add clear if button floats or display inline-flex */
}

.read-more-content.expanded {
  display: block;
}

.read-more-container .read-more-btn {
  background-color: transparent;
  border: none; /* Keep borderless */
  color: #262626; /* Match icon color or set desired text color */
  cursor: pointer;
  font-weight: 600;
  padding: 10px;     /* Your requested padding */
  border-radius: 3px; /* Your requested border-radius */
    display: flex;

}

.read-more-btn-icon {
  /* Remove margin-left if using margin-right on text */
  /* margin-left: 5px; */
  transition: transform 0.3s ease; /* Keep transition for smoothness */
  flex-shrink: 0; /* Prevent icon from shrinking */
    margin: 3px
}

/* --- Icon Animation --- */
.read-more-btn-icon .vert-line {
  transition: transform 0.3s ease;
  transform-origin: center center; /* Rotate around the center */
}

/* When expanded, rotate the vertical line 90 degrees */
.read-more-btn.expanded .read-more-btn-icon .vert-line {
  transform: rotate(90deg);
}

/* --- Remove old chevron rotation --- */
/* .read-more-btn.expanded .read-more-btn-icon { */
  /* transform: rotate(180deg); /* Remove this line */
/* } */

/* --- Explicitly set icon stroke color --- */
.read-more-btn-icon line {
  stroke: #262626; /* Ensure stroke color is applied */
}

/* Optional: Change icon color on hover */
/* .read-more-btn:hover .read-more-btn-icon line {
  stroke: #0056b3;
} */

/* --- Ensure container padding doesn't affect button alignment --- */
.read-more-divider{
  background: var(--Horizontal-gradient-20-80-OY, linear-gradient(270deg, #FFDE1A 50%, #FFA700 112.5%));
  height: 2px;
align-self: stretch;
}
.read-more-container .read-more-btn:hover ,.read-more-container .read-more-btn:active{
    color: transparent!important;
    background-color: transparent!important;
}