/*
 * Pricing block — visual CSS only.
 * Layout uses Bootstrap flex/grid utilities + bespoke per-variant CSS.
 * All colors, borders, radii come from eggb tokens.
 *
 * Variants:
 *   .eggb-pricing--list       — service rows, single panel
 *   .eggb-pricing--cards      — SaaS tiers, responsive card grid
 *   .eggb-pricing--highlight  — hero featured plan + compact alternatives
 */


/* ─── Shared icon sizing ─────────────────── */

.eggb-pricing .eggb-icon {
  display:        inline-flex;
  width:          1em;
  height:         1em;
  vertical-align: -.125em;
}

.eggb-pricing .eggb-icon svg {
  display: block;
  width:   100%;
  height:  100%;
}


/* ─── Shared typography primitives ──────── */

/* Font size + weight fixed regardless of chosen heading tag via eggb-block-title */
.eggb-pricing {
  --eggb-block-title-size:   1.1875rem;
  --eggb-block-title-weight: 700;
}

.eggb-pricing-title {
  letter-spacing: -.005em;
}

.eggb-pricing-intro {
  line-height: 1.55;
  margin:      0;
}

.eggb-pricing-name {
  font-weight:    700;
  font-size:      var(--eggb-text-md);
  letter-spacing: -.005em;
  line-height:    1.3;
  margin:         0 0 .2rem;
}

.eggb-pricing-description {
  line-height: 1.5;
  margin:      0;
}

.eggb-pricing-period {
  font-size:   var(--eggb-text-sm);
  color:       var(--eggb-text-muted);
  font-weight: 500;
  line-height: 1;
}


/* ─── Shared: promotion strip ────────────── */

.eggb-pricing-promo {
  display:        flex;
  flex-direction: column;
  gap:            .2rem;
  padding:        .65rem 1.125rem;
  background:     color-mix(in srgb, var(--eggb-accent) 7%, transparent);
}

.eggb-pricing-promo + .eggb-pricing-promo {
  border-top: var(--eggb-border-w) solid color-mix(in srgb, var(--eggb-accent) 15%, transparent);
}

.eggb-pricing-promo-title {
  font-size:      var(--eggb-text-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color:          var(--eggb-accent);
  margin:         0;
  line-height:    1.2;
}

.eggb-pricing-promo-description {
  font-size:   var(--eggb-text-sm);
  line-height: 1.45;
  margin:      0;
}


/* ════════════════════════════════════════════
   VARIATION: LIST
   Service rows. Lead-gen friendly.
   Panel surface, item rows, optional note + CTA.
════════════════════════════════════════════ */

.eggb-pricing--list {
  padding:  0;
  overflow: hidden;
}

.eggb-pricing--list .eggb-pricing-head {
  padding:        1.125rem 1.125rem .85rem;
  display:        flex;
  flex-direction: column;
  gap:            .35rem;
}

.eggb-pricing--list .eggb-pricing-items {
  list-style: none;
  margin:     0;
  padding:    0;
}

.eggb-pricing--list .eggb-pricing-item {
  display:               grid;
  grid-template-columns: 1fr auto;
  gap:                   .25rem 1.5rem;
  padding:               .95rem 1.125rem;
  align-items:           center;
  border-top:            var(--eggb-border-w) solid var(--eggb-border);
}

.eggb-pricing--list .eggb-pricing-item--featured {
  background: color-mix(in srgb, var(--eggb-accent) 6%, transparent);
}

.eggb-pricing--list .eggb-pricing-item-body {
  min-width: 0;
}

.eggb-pricing--list .eggb-pricing-featured-tag {
  display:        inline-block;
  font-size:      .625rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color:          var(--eggb-accent);
  margin-left:    .55em;
  vertical-align: .15em;
}

.eggb-pricing--list .eggb-pricing-price-block {
  display:              flex;
  flex-direction:       column;
  align-items:          flex-end;
  gap:                  0.5rem;
  text-align:           right;
  white-space:          nowrap;
  font-variant-numeric: tabular-nums;
}

.eggb-pricing--list .eggb-pricing-price-from {
  display:        block;
  font-size:      var(--eggb-text-xs);
  color:          var(--eggb-text-muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight:    600;
  margin-bottom:  .1rem;
}

.eggb-pricing--list .eggb-pricing-price {
  font-size:      var(--eggb-text-md);
  font-weight:    700;
  letter-spacing: -.01em;
  line-height:    1.2;
  color:          inherit;
}

.eggb-pricing--list .eggb-pricing-promo {
  border-top: var(--eggb-border-w) solid color-mix(in srgb, var(--eggb-accent) 20%, transparent);
}

.eggb-pricing--list .eggb-pricing-note {
  border-top:  var(--eggb-border-w) solid var(--eggb-border);
  padding:     .65rem 1.125rem;
  margin:      0;
  font-size:   var(--eggb-text-xs);
  color:       var(--eggb-text-muted);
  line-height: 1.45;
  background:  color-mix(in srgb, var(--eggb-border) 8%, var(--eggb-surface));
}

.eggb-pricing--list .eggb-pricing-note .eggb-icon {
  opacity:      .7;
  margin-right: .25em;
}

.eggb-pricing--list .eggb-pricing-cta {
  border-top:      var(--eggb-border-w) solid var(--eggb-border);
  padding:         .85rem 1.125rem;
  display:         flex;
  justify-content: center;
  background:      color-mix(in srgb, var(--eggb-accent) 4%, transparent);
}

@media (max-width: 540px) {
  .eggb-pricing--list .eggb-pricing-item {
    grid-template-columns: 1fr;
  }
  .eggb-pricing--list .eggb-pricing-price-block {
    text-align: left;
  }
}


/* ════════════════════════════════════════════
   VARIATION: CARDS
   SaaS plan tiers. 3-column responsive grid.
   Featured card: accent top stripe + badge.
════════════════════════════════════════════ */

.eggb-pricing--cards {
  padding: 0;
}

.eggb-pricing--cards .eggb-pricing-head {
  display:        flex;
  flex-direction: column;
  gap:            .35rem;
  margin-bottom:  1.75rem;
}

.eggb-pricing--cards .eggb-pricing-items {
  list-style:            none;
  margin:                0;
  padding:               0;
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1rem;
}

.eggb-pricing--cards .eggb-pricing-items[data-count="1"] { grid-template-columns: 1fr; }
.eggb-pricing--cards .eggb-pricing-items[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.eggb-pricing--cards .eggb-pricing-items[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.eggb-pricing--cards .eggb-pricing-items[data-count="4"] { grid-template-columns: repeat(4, 1fr); }

.eggb-pricing--cards .eggb-pricing-item {
  position:       relative;
  background:     var(--eggb-surface);
  border:         var(--eggb-border-w) solid var(--eggb-border);
  border-radius:  var(--eggb-radius);
  padding:        1.125rem;
  display:        flex;
  flex-direction: column;
  gap:            .85rem;
}

.eggb-pricing--cards .eggb-pricing-item--featured {
  border-top:  3px solid var(--eggb-accent);
  padding-top: calc(1.125rem - 2px);
}

.eggb-pricing--cards .eggb-pricing-featured-badge {
  position:       absolute;
  top:            -.65rem;
  left:           1.125rem;
  font-size:      .625rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color:          var(--eggb-surface, #fff);
  background:     var(--eggb-accent);
  padding:        .25rem .55rem;
  border-radius:  var(--eggb-radius);
  line-height:    1;
}

.eggb-pricing--cards .eggb-pricing-price-row {
  display:     flex;
  align-items: baseline;
  gap:         .35rem;
  flex-wrap:   wrap;
}

.eggb-pricing--cards .eggb-pricing-price {
  font-size:            1.375rem;
  font-weight:          800;
  letter-spacing:       -.025em;
  line-height:          1;
  font-variant-numeric: tabular-nums;
  color:                inherit;
}

.eggb-pricing--cards .eggb-pricing-features {
  margin: 0;
  gap:    .4rem;
}

.eggb-pricing--cards .eggb-pricing-features .eggb-item-icon {
  color:     var(--eggb-accent);
  font-size: .9rem;
  opacity:   .85;
}

.eggb-pricing--cards .eggb-pricing-features li {
  font-size:   var(--eggb-text-sm);
  line-height: 1.45;
}

.eggb-pricing--cards .eggb-pricing-item-cta {
  margin-top: auto;
}

.eggb-pricing--cards .eggb-pricing-item-cta .eggb-btn {
  width:           100%;
  justify-content: center;
}

.eggb-pricing--cards .eggb-pricing-promo {
  margin-top:    .85rem;
  border:        var(--eggb-border-w) solid color-mix(in srgb, var(--eggb-accent) 20%, transparent);
  border-radius: var(--eggb-radius);
}

.eggb-pricing--cards .eggb-pricing-note {
  margin:      1rem 0 0;
  font-size:   var(--eggb-text-xs);
  color:       var(--eggb-text-muted);
  line-height: 1.45;
  text-align:  center;
}

.eggb-pricing--cards .eggb-pricing-cta {
  margin-top:      1rem;
  display:         flex;
  justify-content: center;
}



/* ════════════════════════════════════════════
   VARIATION: HIGHLIGHT
   Editorial recommendation — featured hero panel
   + compact alternatives list.
════════════════════════════════════════════ */

.eggb-pricing--highlight {
  padding: 0;
}

.eggb-pricing--highlight .eggb-pricing-head {
  display:        flex;
  flex-direction: column;
  gap:            .35rem;
  margin-bottom:  1rem;
}

.eggb-pricing-hero {
  display:               grid;
  grid-template-columns: 1fr 11rem;
  gap:                   1.5rem;
  padding:               1.125rem;
  align-items:           start;
}

.eggb-pricing-hero-body {
  display:        flex;
  flex-direction: column;
  gap:            .75rem;
  min-width:      0;
}

.eggb-pricing-hero-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            .35em;
  font-size:      var(--eggb-text-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color:          var(--eggb-accent);
  line-height:    1;
}

.eggb-pricing-hero-badge::before {
  content:     '';
  width:       14px;
  height:      2px;
  background:  currentColor;
  opacity:     .6;
  flex-shrink: 0;
}

.eggb-pricing--highlight .eggb-pricing-name {
  font-size: 1.25rem;
}

.eggb-pricing-hero-features {
  margin: 0;
  gap:    .35rem;
}

.eggb-pricing-hero-features .eggb-item-icon {
  color:     var(--eggb-accent);
  font-size: .9rem;
  opacity:   .9;
}

.eggb-pricing-hero-features li {
  font-size:   var(--eggb-text-sm);
  line-height: 1.4;
}

.eggb-pricing-hero-action {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  gap:             .75rem;
  padding-left:    1.25rem;
  border-left:     var(--eggb-border-w) solid var(--eggb-border);
  align-self:      stretch;
  justify-content: center;
}

.eggb-pricing-hero-price {
  display:        flex;
  flex-direction: column;
  gap:            .15rem;
}

.eggb-pricing-hero-amount {
  font-size:            1.375rem;
  font-weight:          800;
  letter-spacing:       -.03em;
  line-height:          1;
  font-variant-numeric: tabular-nums;
}

.eggb-pricing-hero-action .eggb-btn {
  width:           100%;
  justify-content: center;
}

.eggb-pricing--highlight .eggb-pricing-promo {
  border-top: var(--eggb-border-w) solid color-mix(in srgb, var(--eggb-accent) 20%, transparent);
}

.eggb-pricing-alts {
  margin:        1.25rem 0 0;
  border:        var(--eggb-border-w) solid var(--eggb-border);
  border-radius: var(--eggb-radius);
  overflow:      hidden;
}

.eggb-pricing-alt {
  display:     grid;
  grid-template-columns: 1fr auto auto;
  gap:         .5rem 1.25rem;
  padding:     .85rem 1.125rem;
  align-items: center;
}

.eggb-pricing-alt + .eggb-pricing-alt {
  border-top: var(--eggb-border-w) solid var(--eggb-border);
}

.eggb-pricing-alt-body {
  min-width: 0;
}

.eggb-pricing-alt-name {
  font-size:      var(--eggb-text-md);
  font-weight:    700;
  letter-spacing: -.005em;
  line-height:    1.25;
  margin:         0 0 .15rem;
}

.eggb-pricing-alt-description {
  font-size:   var(--eggb-text-sm);
  line-height: 1.4;
  margin:      0;
}

.eggb-pricing-alt-price {
  font-size:            var(--eggb-text-md);
  font-weight:          700;
  letter-spacing:       -.01em;
  white-space:          nowrap;
  font-variant-numeric: tabular-nums;
}

.eggb-pricing-alt-period {
  display:     block;
  font-size:   var(--eggb-text-xs);
  font-weight: 400;
  color:       var(--eggb-text-muted);
}

.eggb-pricing--highlight .eggb-pricing-note {
  margin-top:  .85rem;
  font-size:   var(--eggb-text-xs);
  color:       var(--eggb-text-muted);
  line-height: 1.45;
}

.eggb-pricing--highlight .eggb-pricing-note .eggb-icon {
  opacity:      .7;
  margin-right: .2em;
}

.eggb-pricing--highlight .eggb-pricing-cta {
  margin-top:      1rem;
  display:         flex;
  justify-content: center;
}

@media (max-width: 900px) {
  .eggb-pricing--cards .eggb-pricing-items[data-count="4"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .eggb-pricing--cards .eggb-pricing-items,
  .eggb-pricing--cards .eggb-pricing-items[data-count="2"],
  .eggb-pricing--cards .eggb-pricing-items[data-count="3"],
  .eggb-pricing--cards .eggb-pricing-items[data-count="4"] {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .eggb-pricing-hero {
    grid-template-columns: 1fr;
  }
  .eggb-pricing-hero-action {
    padding-left:    0;
    border-left:     none;
    border-top:      var(--eggb-border-w) solid var(--eggb-border);
    padding-top:     .85rem;
    flex-direction:  row;
    align-items:     center;
    justify-content: space-between;
  }
  .eggb-pricing-hero-action .eggb-btn {
    width: auto;
  }
  .eggb-pricing-alt {
    grid-template-columns: 1fr auto;
    grid-template-rows:    auto auto;
  }
  .eggb-pricing-alt-price {
    grid-row:    1;
    grid-column: 2;
  }
  .eggb-pricing-alt .eggb-btn {
    grid-row:    2;
    grid-column: 1 / -1;
  }
}