@layer components {
  .segmented-control {
    background-color: var(--color-surface-alt);
    border-radius: 0.5rem;
    padding: 0.25rem;
    display: inline-flex;
    position: relative;
    cursor: pointer;
    user-select: none;
  }

  .segmented-item {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary-light);
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    z-index: 1;
  }

  .segmented-item.active {
    background-color: var(--color-white);
    color: var(--text-light);
    box-shadow: 0 1px 2px 0 oklch(0% 0 0 / 0.05);
  }

  .discount-badge {
    color: var(--color-success);
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.25rem;
  }
}