/* =========================================================================
   ProductSelector — pill group to choose the Bloom product a price grid maps
   to. Matches the pricing-hero toggle aesthetic (dark glass pill + gradient
   active state). Shared across the pricing page and the homepage pricing
   section (both dark backdrops).
   ========================================================================= */

.product-selector {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  padding: 6px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.product-selector-item {
  --product-selector-accent: var(--violet-400);

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 9999px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--slate-300);
  background: transparent;
  border: none;
  cursor: default;
  white-space: nowrap;
}

.product-selector-item[data-product='plugin'] {
  --product-selector-accent: var(--cyan-400);
}

.product-selector-item[data-product='meeting'] {
  --product-selector-accent: var(--emerald-400);
}

.product-selector-item.is-active {
  background: linear-gradient(135deg, var(--indigo-500), var(--violet-500));
  color: var(--color-white);
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.35);
}

.product-selector-item.is-disabled {
  color: var(--slate-500);
}

.product-selector-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--product-selector-accent);
}

.product-selector-label--stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.05;
  text-align: center;
}

.product-selector-label--stack strong {
  font: inherit;
}

.product-selector-label--stack small {
  color: rgba(226, 232, 240, 0.68);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-selector-item.is-disabled .product-selector-label--stack small {
  color: rgba(100, 116, 139, 0.78);
}

/* "Bientôt" badge stays neutral so colour belongs to the logo only. */
.product-selector-soon {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(148, 163, 184, 0.16);
  color: var(--slate-400);
  border: 1px solid rgba(148, 163, 184, 0.28);
}

/* ---------- Tablet & down: compact sizing (still a single-row pill) ---------- */
@media (max-width: 768px) {
  .product-selector-item {
    padding: 8px 13px;
    font-size: 0.82rem;
    gap: 6px;
  }

  .product-selector-icon {
    width: 16px;
    height: 16px;
  }

  .product-selector-soon {
    font-size: 0.58rem;
    padding: 2px 6px;
  }
}

/* ---------- Phones: the three pills no longer fit on one row (the "Bientôt"
   badges push past ~460px), so the group becomes a full-width rounded container
   whose buttons wrap onto two rows. All products stay visible — the point of the
   disabled pills is discoverability. ---------- */
@media (max-width: 500px) {
  .product-selector {
    display: flex;
    width: 100%;
    border-radius: 22px;
    row-gap: 4px;
  }
}