/* Ecchotag Accordion — frontend.css (cleaned)
   - Header: white (closed), #f5f5f5 on hover/open
   - Elegant title (lighter weight)
   - Plus/Minus indicator (always works), Chevron optional
*/

.ea-accordion{width:100%;display:flex;flex-direction:column;gap:var(--ea-gap,10px)}
.ea-item{border:1px solid var(--ea-border,#e5e7eb);border-radius:var(--ea-radius,10px);overflow:hidden;background:var(--ea-bg-closed,#fff)}

/* Header */
.ea-head{
  all:unset;
  display:flex;
  align-items:center;
  justify-content:flex-start;  /* title grows, icon on right */
  gap:12px;
  width:100%;
  padding:var(--ea-padding,16px);
  cursor:pointer;
  background:#ffffff;
  transition:background .25s ease,color .25s ease;
  box-sizing:border-box;
}

/* Light gray when hovered OR opened */
.ea-head:hover,
.ea-item.is-open .ea-head{background:#f5f5f5}

/* Title */
.ea-title{
  color:var(--ea-title-color,#0f172a);
  font-size:var(--ea-title-size,18px);
  line-height:1.3;
  font-weight:300;
  letter-spacing:.2px;
  flex:1;
}

/* =============================
   Icon system (right side)
   ============================= */

/* Base icon box */
.ea-icon{
  position:relative;
  display:block;
  width:14px;height:14px;
  flex:0 0 14px;
  margin-left:12px;
}

/* --- PLUS / MINUS (works regardless of data-attribute) --- */
.ea-accordion .ea-icon::before,
.ea-accordion .ea-icon::after{
  content:"";
  position:absolute;
  background:#64748b;
  border-radius:1px;
  box-sizing:border-box; /* beat elementor resets */
}

/* horizontal bar (minus) */
.ea-accordion .ea-icon::before{
  left:2px;right:2px;top:50%;
  height:2px;transform:translateY(-50%);
}

/* vertical bar (to make a plus) */
.ea-accordion .ea-icon::after{
  top:2px;bottom:2px;left:50%;
  width:2px;transform:translateX(-50%);
}

/* when open, hide vertical bar => minus */
.ea-item.is-open .ea-icon::after{display:none}

/* --- Optional: Chevron mode if you later want it ---
   (Only active when data-icons=\"chevron\" is present)
*/
.ea-accordion[data-icons="chevron"] .ea-icon::before,
.ea-accordion[data-icons="chevron"] .ea-icon::after{content:none}
.ea-accordion[data-icons="chevron"] .ea-icon::before{
  content:"";
  position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;
  width:8px;height:8px;
  border-right:2px solid #64748b;border-bottom:2px solid #64748b;
  transform:rotate(45deg);
  transition:transform .25s ease;
}
.ea-accordion[data-icons="chevron"] .ea-item.is-open .ea-icon::before{
  transform:rotate(-135deg);
}

/* Panels */
.ea-panel{max-height:0;overflow:hidden;background:var(--ea-bg-closed,#fff)}
.ea-panel-inner{padding:var(--ea-padding,16px);border-top:1px solid var(--ea-border,#e5e7eb);background:var(--ea-bg-open,#fff)}
.ea-item.is-open .ea-panel{max-height:9999px}

/* Remove Hello theme\'s default focus color on accordion buttons */
.ea-head:focus,
.ea-head:focus-visible {
  outline: none;
  box-shadow: none;
  background: #ffffff; /* return to closed color */
}

/* If open, keep our light gray look instead of pink */
.ea-item.is-open .ea-head:focus,
.ea-item.is-open .ea-head:focus-visible {
  background: #f5f5f5;
}