.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;
}*/

/*Mariia's code*/
.simple-read-more {
  display: block;
  border-bottom: none;
}

.arrow-icon {
    transition: transform .3s ease;
    flex-shrink: 0;
    margin: 3px;
}

.read-more-btn.expanded .arrow-icon {
    transform: rotate(180deg);
}

.simple-read-more .read-more-container {
  border-bottom: none;
  display: block;
}

.read-more-visible-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 12px;
    align-items: center;
}


.simple-read-more .read-more-btn {
    width: 40px;
    height: 40px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: #eeeeee;
}


.simple-read-more .read-more-btn.expanded {
    background: #FFF6BD;
}

.simple-read-more .arrow-icon {
    width: 24px;
    height: 24px;

    margin: 0;
    flex-shrink: 0;

    transition: transform .3s ease;
}

.simple-read-more .read-more-content {
    margin-left: 52px;
}