/**
 * Feature List.
 *
 * The widget originally shipped with no stylesheet at all, so every page that
 * uses it hand-writes the layout in the container's Custom CSS box. Eight live
 * pages share one identical block; the defaults below are exactly that block,
 * so adding this file changes nothing on screen — it only moves the styling
 * behind real Style-tab controls.
 *
 * Every value is a custom property so the controls can drive it. The controls
 * set the property on the widget root; the rules here consume it. That keeps
 * the cascade flat: one place to set, one place to read.
 */

.soapkits-feature-list {
  --sfl-gap: 18px;          /* space between items            */
  --sfl-item-gap: 14px;     /* space between icon and text    */
  --sfl-item-dir: row;      /* icon beside, or above, the text */
  --sfl-item-align: flex-start;
  --sfl-icon: 28px;         /* icon box                       */
  --sfl-icon-radius: 9px;
  --sfl-icon-glyph: 14px;   /* glyph inside the box           */
  --sfl-icon-offset: 1px;   /* nudge to sit on the first line */
  --sfl-text-gap: 4px;      /* title -> subtitle              */
  --sfl-icon-color: #7c3aed;
  --sfl-icon-bg: rgba(124, 58, 237, 0.1);

  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sfl-gap);
}

.soapkits-feature-list .soapkits-feature-list__item {
  display: flex;
  flex-direction: var(--sfl-item-dir);
  align-items: var(--sfl-item-align);
  gap: var(--sfl-item-gap);
}

.soapkits-feature-list .soapkits-feature-list__icon {
  flex: 0 0 var(--sfl-icon);
  width: var(--sfl-icon);
  height: var(--sfl-icon);
  min-width: var(--sfl-icon);
  border-radius: var(--sfl-icon-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--sfl-icon-offset);
  color: var(--sfl-icon-color);
  background-color: var(--sfl-icon-bg);
}

/* Both branches of Icons_Manager's output (SVG and icon-font <i>). */
.soapkits-feature-list .soapkits-feature-list__icon svg,
.soapkits-feature-list .soapkits-feature-list__icon i {
  width: var(--sfl-icon-glyph);
  height: var(--sfl-icon-glyph);
  font-size: var(--sfl-icon-glyph);
  display: block;
}

/* `min-width: 0` because a flex item defaults to `min-width: auto`, which
   refuses to shrink below its longest word — long prose would push the icon
   off the edge instead of wrapping. */
.soapkits-feature-list .soapkits-feature-list__text {
  display: flex;
  flex-direction: column;
  gap: var(--sfl-text-gap);
  min-width: 0;
}

.soapkits-feature-list .soapkits-feature-list__title {
  font-weight: 700;
  line-height: 1.45;
}

.soapkits-feature-list .soapkits-feature-list__subtitle {
  font-size: 15px;
  line-height: 1.65;
}