/* AutoSigma Flow Boxes — frontend styles (v2.1.0)
   Selectable skins via [data-skin]; themeable via CSS variables. */

.asfb{
  --asfb-light-bg:#FFFFFF;
  --asfb-soft-tile:#F3F3FA;
  --asfb-border:#E7E9F5;
  --asfb-featured-header:#1B1340;
  --asfb-dark-bg:#1B1340;
  --asfb-dark-border:#2A2156;
  --asfb-ink:#141A2E;
  --asfb-muted:#5A6178;
  --asfb-dark-ink:#FFFFFF;
  --asfb-dark-muted:#B9B4D8;
  --asfb-divider:#EEF0F7;
  --asfb-vdivider:#E3E5F0;
  --asfb-radius:18px;
  --asfb-gap:16px;
  --asfb-pad:22px;
  --asfb-arrow:#6A4CE0;
  --asfb-title-col:120px;
  --asfb-feature-grow:1.6;
  container-type:inline-size;
}
.asfb *{box-sizing:border-box}

.asfb__track{display:flex;align-items:stretch;gap:var(--asfb-gap)}

.asfb__box{position:relative;display:flex;flex-direction:column;flex:1 1 0;min-width:0;
  border-radius:var(--asfb-radius);padding:var(--asfb-pad);
  background:var(--asfb-light-bg);border:1px solid var(--asfb-border)}

/* header: centered horizontally, pinned to top, across all skins */
.asfb__head{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px;flex:0 0 auto}
.asfb__badge{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;background:var(--acc,#5B2EE5);color:#fff}
.asfb__badge svg,.asfb__badge img{width:18px;height:18px;max-width:100%;max-height:100%;object-fit:contain;display:block}
.asfb__badge i{font-size:16px;line-height:1;color:#fff}
.asfb__label{font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:13px;color:var(--acc,#5B2EE5)}

/* items: centered group filling the remaining height */
.asfb__items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;flex:1 1 auto;justify-content:center}
.asfb__item{display:flex;gap:12px;align-items:flex-start}
.asfb__icon{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--acc,#5B2EE5) 14%, #fff);color:var(--acc,#5B2EE5)}
.asfb__icon svg,.asfb__icon img{width:17px;height:17px;max-width:100%;max-height:100%;object-fit:contain;display:block}
.asfb__icon i{font-size:15px;line-height:1}
.asfb__text{min-width:0}
.asfb__title{font-weight:800;font-size:14px;margin:0 0 2px;color:var(--asfb-ink)}
.asfb__desc{font-size:12.5px;line-height:1.45;margin:0;color:var(--asfb-muted)}

.asfb__arrow{flex:0 0 auto;align-self:center;display:flex;align-items:center;color:var(--asfb-arrow);padding:0 2px}
.asfb__arrow svg{display:block}

/* ===================== SKINS ===================== */
/* plain: base only */

/* soft: individual grey item tiles */
[data-skin="soft"] .asfb__item{background:var(--asfb-soft-tile);border-radius:12px;padding:14px 16px}

/* featured: wider, emphasized, colored header bar, inline item rows */
[data-skin^="featured"]{flex-grow:var(--asfb-feature-grow);padding-top:0;overflow:hidden;
  border:1.5px solid color-mix(in srgb, var(--acc,#5B2EE5) 45%, #fff);
  box-shadow:0 26px 54px -32px rgba(40,28,90,.55)}
[data-skin^="featured"] .asfb__head{margin:0 calc(-1 * var(--asfb-pad)) 18px;padding:16px var(--asfb-pad);border-radius:0}
[data-skin^="featured"] .asfb__label{color:#fff}
[data-skin^="featured"] .asfb__badge{background:#fff;color:var(--acc,#5B2EE5)}
[data-skin^="featured"] .asfb__items{gap:0;justify-content:center}
[data-skin^="featured"] .asfb__item{align-items:center;padding:14px 0}
[data-skin^="featured"] .asfb__item + .asfb__item{border-top:1px solid var(--asfb-divider)}
[data-skin^="featured"] .asfb__text{display:flex;align-items:center}
[data-skin^="featured"] .asfb__title{flex:0 0 var(--asfb-title-col);margin:0;padding-right:14px;border-right:1px solid var(--asfb-vdivider)}
[data-skin^="featured"] .asfb__desc{flex:1 1 auto;padding-left:14px}
[data-skin="featured-navy"] .asfb__head{background:var(--asfb-featured-header)}
[data-skin="featured-gradient"] .asfb__head{background:linear-gradient(135deg, var(--acc,#5B2EE5), #4F7BE8)}

/* dark: full navy box */
[data-skin="dark"]{background:var(--asfb-dark-bg);border:1px solid var(--asfb-dark-border)}
[data-skin="dark"] .asfb__label{color:var(--asfb-dark-ink)}
[data-skin="dark"] .asfb__title{color:var(--asfb-dark-ink)}
[data-skin="dark"] .asfb__desc{color:var(--asfb-dark-muted)}
[data-skin="dark"] .asfb__icon{background:transparent;color:#fff;
  border:1.5px solid color-mix(in srgb, #fff 35%, transparent)}

/* ===================== stacked (narrow) ===================== */
@container (max-width: 760px){
  .asfb__track{flex-direction:column;align-items:stretch}
  .asfb__box{flex:0 0 auto}
  .asfb__items{flex:0 0 auto;justify-content:flex-start}
  .asfb__arrow{transform:rotate(90deg);margin:4px 0}
}
/* viewport fallback for browsers without container queries */
@media (max-width: 782px){
  .asfb__track{flex-direction:column;align-items:stretch}
  .asfb__box{flex:0 0 auto}
  .asfb__items{flex:0 0 auto;justify-content:flex-start}
  .asfb__arrow{transform:rotate(90deg);margin:4px 0}
}